uni-app适配深色模式的关键在于使用css变量和全局状态管理实现动态切换。首先，通过prefers-color-scheme检测系统主题或手动设置主题变量；其次，使用css变量统一管理颜色，在app.vue中定义亮暗两套色值并在组件中引用；第三，若需用户手动切换，可通过vuex或globaldata保存状态，并动态修改根元素类名触发样式更新；最后，注意多端兼容问题，如h5支持媒体查询、微信小程序需手动控制、app端可结合原生配置，同时处理图片图标的显示适配问题。
深色模式在现在的App中已经成了标配功能，用户喜欢，也更护眼。uni-app 要适配深色模式，其实并不复杂，但要做得细致、兼容性好，还是得注意一些关键点。
1. 深色模式适配的基本思路
uni-app 支持通过 CSS 变量和平台特性来实现深色模式切换。核心思路是：
- 利用
prefers-color-scheme
媒体查询检测系统是否启用深色模式； - 或者手动设置一个主题变量，控制当前是亮色还是深色；
- 然后通过样式类名或CSS变量来动态切换颜色方案。
如果你只是想跟随系统设置，那可以简单地用媒体查询；如果需要支持用户手动切换，则建议使用全局状态管理或者全局变量配合class来控制。
2. 使用 CSS 变量统一管理颜色
这是推荐的做法，能让你的样式更容易维护。
比如，在
App.vue的
<style>中定义两套颜色变量：
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
.dark-mode {
--bg-color: #1a1a1a;
--text-color: #e6e6e6;
}然后在页面组件中使用这些变量：
<view class="content">{{ text }}</view>
<style>
.content {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>这样只需要给根节点加上
.dark-mode类，就能整体切换颜色了。
3. 手动切换主题的实现方法
如果你想让用户自己选择主题（比如在设置里有个开关），可以这样做：
- 在 Vuex 或 globalData 中保存当前主题状态；
- 根据状态动态给
App.vue
的根元素添加或移除.dark-mode
类； - 页面监听变化后自动刷新样式。
举个简单的例子：
// App.vue
export default {
onLaunch() {
const isDark = uni.getStorageSync('theme') === 'dark';
this.$store.commit('SET_THEME', isDark ? 'dark' : 'light');
}
}<!-- App.vue template -->
<template>
<view :class="themeClass">
<router-view />
</view>
</template>
<script>
export default {
computed: {
themeClass() {
return this.$store.state.theme === 'dark' ? 'dark-mode' : '';
}
}
}
</script>这样就实现了用户手动切换主题的功能。
4. 兼容不同平台的小细节
uni-app 最大的难点在于多端兼容，尤其是微信小程序、H5 和原生App之间的差异。
-
H5端：支持
prefers-color-scheme
，可以直接检测； - 微信小程序：不支持媒体查询，只能靠手动切换；
- App端（如Android）：可以通过原生配置默认主题，但最好也保留手动切换入口。
还有一些图片和图标可能在深色背景下看不清，这时候可以考虑：
- 使用 SVG 图标，并根据主题改变颜色；
- 准备两套图标资源，按主题加载不同的路径；
- 给图片加背景遮罩层，提升对比度。
基本上就这些。深色模式适配看起来简单，但要做到体验一致、兼容性强，还是要花点心思处理细节。
