uniapp 如何获取当前是否暗黑模式

在uniapp开发中，如何判断当前系统是否处于暗黑模式？有没有跨平台的解决方案？我看官方文档没有明确的API说明，希望有经验的朋友能分享下具体实现方法，包括如何监听模式切换事件。

2 回复

在uniapp中，可以使用uni.getSystemInfoSync()获取系统信息，然后判断theme属性。如果值为’dark’，则为暗黑模式。

示例代码：

const systemInfo = uni.getSystemInfoSync();
if (systemInfo.theme === 'dark') {
  // 暗黑模式
}

在 UniApp 中，可以通过以下方法检测当前是否处于暗黑模式：

方法一：使用 uni.getSystemInfo() 获取系统主题

通过系统信息 API 判断当前主题模式：

uni.getSystemInfo({
  success: (res) => {
    if (res.theme === 'dark') {
      console.log('当前是暗黑模式')
      // 执行暗黑模式相关逻辑
    } else {
      console.log('当前是浅色模式')
      // 执行浅色模式相关逻辑
    }
  }
})

方法二：监听主题变化

如果需要实时响应主题切换，可以添加监听器：

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

// 初始检查
uni.getSystemInfo({
  success: (res) => {
    console.log('当前主题:', res.theme)
  }
})

注意事项：

  1. 平台支持：

    • 此功能主要支持 iOS、Android 及部分小程序平台
    • 在 H5 端可能无法获取主题信息

  2. 兼容性处理：

// 安全获取方式
const theme = res.theme || 'light'
  1. CSS 适配： 建议同时使用 CSS 媒体查询作为备用方案：
@media (prefers-color-scheme: dark) {
  /* 暗黑模式样式 */
}

@media (prefers-color-scheme: light) {
  /* 浅色模式样式 */
}

推荐结合使用 JS 检测和 CSS 媒体查询，以确保最佳兼容性和用户体验。

回到顶部