uniapp 深色模式无法指定颜色怎么办？

在 uniapp 开发中，我想为深色模式指定特定的颜色值，但发现无法生效。尝试在 CSS 中使用 var(--theme-color) 和媒体查询 prefers-color-scheme: dark，但部分组件颜色仍跟随系统默认值。请问如何强制覆盖深色模式下的颜色，确保自定义样式优先级高于系统默认？

2 回复

用CSS变量或媒体查询解决。在uni.scss定义全局颜色变量，通过@media (prefers-color-scheme: dark)适配系统深色模式。或者用条件编译动态切换主题色。


在 UniApp 中，深色模式的颜色适配问题可以通过以下方法解决：

1. 使用 CSS 变量

定义全局颜色变量，根据系统主题动态切换：

/* 在 App.vue 或全局 CSS 中定义 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

.page {
  background-color: var(--bg-color);
  color: var(--text-color);
}

2. 结合 Vuex 动态管理主题

通过 Vuex 存储主题状态，结合 CSS 变量实现动态切换：

// store/index.js
export default new Vuex.Store({
  state: {
    isDark: false
  },
  mutations: {
    toggleTheme(state) {
      state.isDark = !state.isDark
    }
  }
})

<!-- 在组件中使用 -->
<template>
  <view :class="isDark ? 'dark-theme' : 'light-theme'">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  computed: {
    isDark() {
      return this.$store.state.isDark
    }
  }
}
</script>

3. 条件编译（平台差异处理）

如果需要处理不同平台的深色模式差异：

// #ifdef APP-PLUS
const systemInfo = uni.getSystemInfoSync()
if (systemInfo.theme === 'dark') {
  // 执行深色模式逻辑
}
// #endif

4. 使用 SCSS/Sass 变量

通过预处理器简化颜色管理：

$light-bg: #ffffff;
$dark-bg: #1a1a1a;

.theme-container {
  background-color: $light-bg;
  
  @media (prefers-color-scheme: dark) {
    background-color: $dark-bg;
  }
}

注意事项：

  • 在 pages.json 中配置的窗口背景色不支持动态切换，建议使用页面内元素背景色
  • 图片资源也需要准备深色版本，可通过条件渲染切换
  • 测试时务必在真机上验证，部分模拟器可能无法正确识别系统主题

通过以上方法，即可在 UniApp 中实现完善的深色模式颜色适配。

回到顶部