uniapp 夜间模式

在 Uniapp 中实现夜间模式可以通过以下步骤：

1. 在 App.vue 文件中，设置全局变量

<style>
  :root {
    --primary-color: #007aff;
    --background-color: #ffffff;
    --text-color: #333333;
    --background-color-dark: #333333;
    --text-color-dark: #ffffff;
  }
</style>

其中，`--background-color` 和 `--text-color` 是白天模式下的背景色和文本颜色，`--background-color-dark` 和 `--text-color-dark` 是夜间模式下的背景色和文本颜色。

2. 在需要使用主题色的组件中，使用 var() 函数引用变量

<template>
  <div :style="{ backgroundColor: 'var(--background-color)', color: 'var(--text-color)' }">
    <!-- 这里是组件内容 -->
  </div>
</template>

3. 在需要切换夜间模式的地方（如设置页面）中，通过 $setGlobalVar() 方法修改全局变量的值

<script>
  export default {
    data() {
      return {
        isDarkMode: false // 初始值为白天模式
      }
    },
    methods: {
      toggleDarkMode() {
        this.isDarkMode = !this.isDarkMode;
        if (this.isDarkMode) {
          this.$setGlobalVar('--background-color', 'var(--background-color-dark)');
          this.$setGlobalVar('--text-color', 'var(--text-color-dark)');
        } else {
          this.$setGlobalVar('--background-color', '#ffffff');
          this.$setGlobalVar('--text-color', '#333333');
        }
      }
    }
  }
</script>

这样就可以实现夜间模式的切换。通过动态修改全局变量，可以快速地改变应用程序的主题色和样式。