uniapp小程序如何实现暗黑模式

在uniapp开发小程序时，如何适配暗黑模式？目前需要实现根据系统主题自动切换或手动切换黑暗/明亮主题的功能，但不知道具体该怎样操作。请问应该如何检测系统主题变化，并动态修改页面样式？是否有现成的插件或方案可以直接使用？求具体实现方法和代码示例。

2 回复

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

  1. 使用CSS变量定义主题色，如--bg-color、--text-color
  2. 监听系统主题变化：uni.onThemeChange
  3. 动态切换类名或修改CSS变量值
  4. 结合vuex存储主题状态

示例代码：

:root { --bg: #fff; --text: #333; }
.dark { --bg: #000; --text: #fff; }

简单高效，适配系统主题切换。


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

1. 检测系统主题

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

const systemInfo = uni.getSystemInfoSync();
const isDarkMode = systemInfo.theme === 'dark'; // 微信小程序中 theme 字段表示主题

2. 动态切换主题

在 onLoad 或 onShow 生命周期中监听主题变化，并更新页面样式。

export default {
  data() {
    return {
      isDark: false
    };
  },
  onLoad() {
    this.checkTheme();
    // 监听系统主题变化（部分平台支持）
    uni.onThemeChange && uni.onThemeChange((res) => {
      this.isDark = res.theme === 'dark';
    });
  },
  methods: {
    checkTheme() {
      const systemInfo = uni.getSystemInfoSync();
      this.isDark = systemInfo.theme === 'dark';
    }
  }
};

3. 应用主题样式

使用 CSS 变量或类名动态切换样式：

  • 方法一：CSS 变量

    /* 全局 light 主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}
/* 暗黑主题 */
.dark {
  --bg-color: #1e1e1e;
  --text-color: #ffffff;
}

    在页面中应用：

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

    通过动态添加 dark 类名到根元素：

    <view :class="isDark ? 'dark' : ''" class="page">
  <!-- 页面内容 -->
</view>

  • 方法二：内联样式 直接绑定样式：

    <view :style="{ backgroundColor: isDark ? '#1e1e1e' : '#ffffff', color: isDark ? '#ffffff' : '#333333' }">
  <!-- 页面内容 -->
</view>

4. 持久化存储

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

注意事项：

  • 平台差异：uni.onThemeChange 目前仅微信小程序支持，其他平台需手动切换。
  • 兼容性：部分低版本小程序可能不支持 theme 字段，需提供默认 light 主题。

通过以上方法，即可在 UniApp 中灵活实现暗黑模式。

回到顶部