uniapp如何实现夜间模式功能

在uniapp中如何实现夜间模式功能？需要支持动态切换主题颜色，并且能保存用户的偏好设置。有没有完整的示例代码或插件推荐？最好能兼容多端平台。

2 回复

在uniapp中实现夜间模式，可以在全局存储一个主题变量（如isDarkMode），通过vuex或globalData管理。切换时动态修改CSS变量或类名，使用条件渲染或动态class改变样式。


在 UniApp 中实现夜间模式功能，可以通过以下步骤实现：

1. 使用 CSS 变量定义主题

在 App.vue 中定义全局 CSS 变量，分别设置白天和夜间模式的样式：

/* App.vue */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark-mode {
  --bg-color: #1e1e1e;
  --text-color: #ffffff;
}

2. 管理主题状态

使用 Vuex 或全局变量存储当前主题模式：

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

3. 动态切换主题

在页面中通过条件类名绑定主题：

<template>
  <view :class="isDarkMode ? 'dark-mode' : ''">
    <!-- 页面内容 -->
    <button @click="toggleTheme">切换主题</button>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['isDarkMode'])
  },
  methods: {
    ...mapMutations(['toggleTheme'])
  }
}
</script>

<style>
page {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

4. 持久化存储

使用 UniApp 的存储 API 保存用户选择：

// 切换主题时保存
toggleTheme() {
  this.$store.commit('toggleTheme')
  uni.setStorageSync('theme', this.isDarkMode ? 'dark' : 'light')
}

// 应用启动时读取
onLaunch() {
  const saved = uni.getStorageSync('theme')
  if (saved) {
    this.$store.commit('setTheme', saved === 'dark')
  }
}

5. 注意事项

  • 所有样式都应使用 CSS 变量
  • 图片可能需要准备两套（亮色/暗色）
  • 支持 NVUE 页面需要单独处理样式

通过这种方式，可以快速实现全局夜间模式切换，且保持代码可维护性。

回到顶部