实现暗黑模式Dark Mode的一键切换是现代 UI 组件库的标配功能。以下是几款原生支持暗黑模式且切换便捷的主流 UI 库及其实现方式1. Semi Design (React)Semi Design 默认主题自带亮色与暗色模式支持全局切换、跟随系统以及局部模式。全局切换通过给body添加或移除theme-modedark属性来实现。跟随系统利用prefers-color-scheme媒体查询自动检测并切换系统主题。局部模式在顶级元素上添加.semi-always-dark或.semi-always-light类名即可让该区域内的组件强制使用对应模式。2. Naive UI (Vue)Naive UI 的主题系统完全基于 TypeScript 构建内置了暗黑主题支持一键切换。切换方式通过n-config-provider组件的:theme属性绑定darkTheme变量来控制。跟随系统提供useOsTheme钩子可以自动适配操作系统的主题设置也支持手动控制。3. uni-app 生态 (跨端)对于多端开发uni-app 提供了完善的暗黑模式配置和 API 支持。配置开启在manifest.json中配置darkmode: true并指定变量配置文件如theme.json的路径。变量引用在theme.json中定义不同主题下的颜色变量并在pages.json中以开头引用这些变量。手动切换在代码中调用uni.setStorageSync持久化主题状态并通过设置document.documentElement.setAttribute(data-theme, value)来动态切换。4. RiceUI (uni-app x)基于 uni-app x 开发的跨平台 UI 框架同样支持暗黑模式。切换方式引入基础样式后通过手动调用框架提供的setTheme方法传入dark或light参数即可切换。自定义主题支持通过覆盖 CSS 变量如.rice-theme-dark下的变量来深度自定义暗黑模式下的颜色。
