uniapp 深色模式如何实现

在uniapp中如何实现深色模式？我尝试通过CSS媒体查询和动态修改主题色来实现，但效果不理想。请问有没有更优雅的解决方案？比如是否支持直接调用系统深色模式设置，或者推荐好用的插件？希望有具体代码示例说明。

2 回复

在uniapp中实现深色模式，可通过以下步骤：

  1. 使用uni.getSystemInfoSync()获取系统主题
  2. 通过CSS变量或条件class切换主题样式
  3. 监听系统主题变化：uni.onThemeChange()
  4. 手动切换时，使用uni.setStorageSync()保存用户选择

示例：

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}
.dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

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

1. 检测系统主题

使用 uni.getSystemInfoSync() 获取系统主题，判断是否为深色模式。

const systemInfo = uni.getSystemInfoSync();
const isDarkMode = systemInfo.theme === 'dark'; // 部分平台支持（如微信小程序）

2. 手动切换主题

通过全局变量或 Vuex 管理当前主题状态，并提供切换功能。

// 在 Vuex 或全局数据中定义
data() {
  return {
    isDarkMode: false
  };
},
methods: {
  toggleTheme() {
    this.isDarkMode = !this.isDarkMode;
    this.applyTheme();
  },
  applyTheme() {
    if (this.isDarkMode) {
      // 应用深色样式
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      // 恢复浅色样式
      document.documentElement.setAttribute('data-theme', 'light');
    }
  }
}

3. CSS 变量定义主题样式

使用 CSS 变量动态切换颜色，在 App.vue 或全局样式中定义：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

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

4. 监听系统主题变化

在支持的系统（如 App 端）中监听主题变化：

uni.onThemeChange((res) => {
  this.isDarkMode = res.theme === 'dark';
  this.applyTheme();
});

5. 持久化存储

使用 uni.setStorageSync() 保存用户选择的主题，应用启动时恢复：

// 启动时读取
const savedTheme = uni.getStorageSync('theme');
if (savedTheme) {
  this.isDarkMode = savedTheme === 'dark';
  this.applyTheme();
}

// 切换时保存
toggleTheme() {
  this.isDarkMode = !this.isDarkMode;
  uni.setStorageSync('theme', this.isDarkMode ? 'dark' : 'light');
  this.applyTheme();
}

注意事项：

  • 平台兼容性：部分功能（如 uni.onThemeChange）可能仅限 App 端，需检查文档。
  • 样式覆盖：确保所有页面元素使用 CSS 变量，避免固定颜色值。
  • 测试多端：在 iOS、Android 及小程序中验证效果。

通过以上方法，可以灵活实现深色模式，并适配用户系统偏好或手动选择。

回到顶部