uni-app小程序如何手动切换暗黑模式和明亮模式？

在uni-app中实现手动切换暗黑模式和明亮模式，你可以通过修改系统的主题样式（CSS变量或类名）来实现。以下是一个示例，展示如何在uni-app中实现这一功能。

首先，你需要在页面的样式中定义两种主题：明亮模式和暗黑模式。可以使用CSS变量来方便地切换主题。

/* 在App.vue或某个全局样式文件中定义CSS变量 */
:root {
  --background-color: #ffffff; /* 明亮模式背景色 */
  --text-color: #000000; /* 明亮模式文字色 */
  /* ... 其他明亮模式下的样式变量 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000; /* 暗黑模式背景色 */
    --text-color: #ffffff; /* 暗黑模式文字色 */
    /* ... 其他暗黑模式下的样式变量 */
  }
}

/* 应用这些变量到具体的元素上 */
body, .page {
  background-color: var(--background-color);
  color: var(--text-color);
}

接下来，在JavaScript中，你可以通过修改根元素的class或者CSS变量来切换主题。这里我们选择修改CSS变量的方式。

// 在某个Vue组件中，比如App.vue
<template>
  <view class="container">
    <button @click="switchTheme">切换主题</button>
    <!-- 其他内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches
    };
  },
  methods: {
    switchTheme() {
      const root = document.documentElement;
      if (this.isDarkMode) {
        // 切换到明亮模式
        root.style.setProperty('--background-color', '#ffffff');
        root.style.setProperty('--text-color', '#000000');
        // ... 其他明亮模式下的样式变量设置
      } else {
        // 切换到暗黑模式
        root.style.setProperty('--background-color', '#000000');
        root.style.setProperty('--text-color', '#ffffff');
        // ... 其他暗黑模式下的样式变量设置
      }
      this.isDarkMode = !this.isDarkMode;
    }
  }
};
</script>

注意，上述代码示例中，我们通过window.matchMedia('(prefers-color-scheme: dark)').matches来判断当前系统主题，并在点击按钮时切换主题。这种方法虽然可以实现手动切换，但在实际应用中，你可能还需要考虑如何持久化用户的主题选择（例如，使用localStorage存储用户的选择），以便在用户重新打开应用时能够恢复他们选择的主题。

此外，如果你的应用需要更复杂的主题管理，可以考虑使用第三方主题管理库或者自己封装一个主题管理模块来统一处理主题切换逻辑。