uniapp深色

uniapp深色模式实现方法

在uniapp中实现深色模式可以通过以下方式完成：

全局CSS变量方案 通过定义CSS变量在不同模式下的值实现主题切换。在App.vue中定义全局变量：

:root {
  --primary-color: #007AFF;
  --bg-color: #FFFFFF;
  --text-color: #000000;
}

[data-theme="dark"] {
  --primary-color: #0A84FF;
  --bg-color: #1C1C1E;
  --text-color: #FFFFFF;
}

uni.scss配置 在uni.scss中配置主题相关变量：

$uni-theme-mode: light; // 默认主题
$uni-text-color-light: #333;
$uni-bg-color-light: #fff;
$uni-text-color-dark: #fff;
$uni-bg-color-dark: #121212;

监听系统主题变化 通过uni.onThemeChange监听系统主题变化：

uni.onThemeChange((res) => {
  this.theme = res.theme;
  uni.setStorageSync('theme', res.theme);
});

手动切换主题实现 创建主题切换组件，通过修改document.documentElement属性：

switchTheme() {
  const theme = this.theme === 'light' ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', theme);
  uni.setStorageSync('theme', theme);
}

条件编译处理平台差异 针对不同平台做兼容处理：

// #ifdef APP-PLUS
plus.navigator.setUIStyle(theme);
// #endif

注意事项

1. 图片资源需要准备亮色/暗色两套，通过条件渲染
2. 表单元素需要单独处理样式兼容性
3. 第三方组件可能需要额外适配
4. 建议使用CSS变量而非固定色值

深色模式最佳实践

样式隔离方案 为每个页面/组件创建独立样式文件：

/* light-theme.css */
.page-container {
  background-color: var(--bg-color);
}

/* dark-theme.css */
.page-container {
  background-color: var(--bg-color);
}

性能优化技巧

1. 使用CSS变量而非SCSS变量
2. 减少主题切换时的DOM操作
3. 对静态资源进行预加载
4. 使用will-change属性提升动画性能

状态管理集成 在Vuex中存储主题状态：

const store = new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme
    }
  }
})

测试方案

1. 使用uni-app的自动化测试工具
2. 在不同设备上测试主题切换效果
3. 检查内存泄漏情况
4. 测试主题切换时的过渡动画

以上方法可根据项目需求组合使用，建议从简单方案开始逐步完善。对于复杂项目，可以考虑使用第三方主题管理插件如uni-ui的主题解决方案。