企业官网建设流程全解析

实现暗黑模式（Dark Mode）的一键切换，是现代 UI 组件库的标配功能。以下是几款原生支持暗黑模式且切换便捷的主流 UI 库及其实现方式：

1. Semi Design (React)

Semi Design 默认主题自带亮色与暗色模式，支持全局切换、跟随系统以及局部模式。

• 全局切换：通过给body添加或移除theme-mode='dark'属性来实现。
• 跟随系统：利用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下的变量）来深度自定义暗黑模式下的颜色。