uniapp如何获取light和dark主题模式

在uniapp中如何检测当前系统是处于light还是dark主题模式？我想根据不同的主题模式动态切换应用样式，但找不到相关的API或方法。求教各位大佬有没有解决方案？

2 回复

在uniapp中，可以通过以下方式获取主题模式：

  1. 使用uni.getSystemInfoSync()获取系统信息
const systemInfo = uni.getSystemInfoSync()
const theme = systemInfo.theme // 'light' 或 'dark'
  1. 监听主题变化
uni.onThemeChange((res) => {
  console.log(res.theme) // 主题变化时的回调
})

注意：部分平台可能不支持，建议做好兼容处理。


在 UniApp 中，可以通过以下方法获取当前系统的浅色（light）或深色（dark）主题模式：

方法一：使用 uni.getSystemSetting()（推荐）

UniApp 提供了 uni.getSystemSetting() API 来获取系统设置，包括主题模式。

// 获取系统主题模式
uni.getSystemSetting({
  success: (res) => {
    const theme = res.theme;
    if (theme === 'dark') {
      console.log('当前为深色模式');
      // 执行深色主题逻辑
    } else {
      console.log('当前为浅色模式');
      // 执行浅色主题逻辑
    }
  },
  fail: (err) => {
    console.error('获取主题失败:', err);
  }
});

方法二：监听主题变化

如果需要实时响应主题切换，可以监听系统主题变化事件：

// 监听主题变化
uni.onThemeChange((res) => {
  const theme = res.theme;
  if (theme === 'dark') {
    console.log('切换到深色模式');
  } else {
    console.log('切换到浅色模式');
  }
});

注意事项：

  1. 平台支持：

    • 此功能在 H5、微信小程序、App 端支持较好，但具体支持情况需查看对应平台文档。
    • 部分低版本平台可能不支持，建议先判断 API 是否存在。

  2. 兼容性处理：

    if (uni.getSystemSetting) {
  // 执行获取主题逻辑
} else {
  console.log('当前环境不支持获取主题');
}

  3. CSS 适配： 可以结合 CSS 媒体查询实现样式自动切换：

    /* 深色模式 */
[@media](/user/media) (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #fff;
  }
}
/* 浅色模式 */
[@media](/user/media) (prefers-color-scheme: light) {
  body {
    background: #fff;
    color: #000;
  }
}

总结：

  • 使用 uni.getSystemSetting() 获取当前主题。
  • 通过 uni.onThemeChange() 监听主题变化。
  • 结合 CSS 媒体查询实现无缝主题切换。

根据你的需求选择合适的方法即可。

回到顶部