uni-app深色模式的适配方案与样式切换-uni-app-PHP中文网

uni-app深色模式的适配方案与样式切换

下次还敢

发布： 2025-09-23 09:03:03

原创

777人浏览过

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

登录后复制

类，就能整体切换颜色了。

DeepSeek App

DeepSeek官方推出的AI对话助手App

查看详情

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>

登录后复制

这样就实现了用户手动切换主题的功能。