uniapp 暗黑模式如何实现

在uniapp中如何实现暗黑模式？希望了解具体的实现方法和步骤，包括如何动态切换主题颜色、适配不同页面以及处理系统默认的暗黑模式设置。最好能提供示例代码或相关插件推荐。

2 回复

在uniapp中实现暗黑模式，可通过CSS变量和媒体查询。在全局CSS中定义两套主题色变量，使用@media (prefers-color-scheme: dark)检测系统暗黑模式，动态切换变量。也可通过js手动切换主题，修改根节点类名或CSS变量值。


在 UniApp 中实现暗黑模式，可以通过以下步骤完成：

1. 检测系统主题

使用 uni.getSystemInfo() 获取系统主题，判断是否为暗黑模式。

uni.getSystemInfo({
  success: (res) => {
    const theme = res.theme || 'light';
    if (theme === 'dark') {
      // 应用暗黑样式
      this.applyDarkTheme();
    }
  }
});

2. 动态切换主题

  • 定义 CSS 变量：在 App.vue 的样式中定义全局 CSS 变量。
/* 明亮模式变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}
/* 暗黑模式变量 */
.dark {
  --bg-color: #1e1e1e;
  --text-color: #ffffff;
}
  • 动态切换类名：根据主题动态为页面根元素添加 .dark 类。
// 在页面或全局监听主题变化
methods: {
  applyDarkTheme() {
    document.documentElement.classList.add('dark');
  },
  removeDarkTheme() {
    document.documentElement.classList.remove('dark');
  }
}

3. 组件和页面中使用变量

在页面或组件样式中使用 CSS 变量：

.page {
  background-color: var(--bg-color);
  color: var(--text-color);
}

4. 持久化存储

使用 uni.setStorageSync() 保存用户选择的主题，确保下次启动时应用相同主题。

5. 注意事项

  • 兼容性：部分低版本系统或平台可能不支持 theme 检测，需提供手动切换选项。
  • 全局管理：可通过 Vuex 或全局变量管理主题状态，方便多页面同步。

通过以上方法，可以灵活实现 UniApp 的暗黑模式适配。

回到顶部