React Native如何判断设备处于深色或浅色模式？

下面按主流平台分别给出检测方法及适配逻辑：

Web 端 #

CSS 直接适配 #

利用 prefers-color-scheme 媒体特性，无需JS即可自动适配：

/* 浅色模式默认样式 */
body {
  background-color: #ffffff;
  color: #333333;
}

/* 深色模式样式覆盖 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
}

JS 检测与监听 #

如果需要动态执行额外逻辑，可通过JS检测当前模式并监听变化：

// 初始检测当前模式
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode ? '当前为深色模式' : '当前为浅色模式');

// 监听模式切换
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
  const newMode = event.matches ? 'dark' : 'light';
  // 这里插入配色切换的自定义逻辑
});

iOS 端（Swift） #

通过 UITraitCollection 获取当前模式，并监听模式变化：

// 初始判断
let currentStyle = UITraitCollection.current.userInterfaceStyle
switch currentStyle {
case .dark:
    // 应用深色配色逻辑
    print("当前为深色模式")
case .light:
    // 应用浅色配色逻辑
    print("当前为浅色模式")
case .unspecified:
    print("未指定模式，默认按浅色处理")
@unknown default:
    break
}

// 在 UIViewController 中监听模式切换
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    guard traitCollection.userInterfaceStyle != previousTraitCollection?.userInterfaceStyle else { return }
    // 执行配色更新逻辑
}

Android 端（Kotlin） #

通过 Configuration 检测模式，需配置监听配置变化：

// 初始判断
val currentMode = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentMode) {
    Configuration.UI_MODE_NIGHT_YES -> {
        // 应用深色配色
        println("当前为深色模式")
    }
    Configuration.UI_MODE_NIGHT_NO -> {
        // 应用浅色配色
        println("当前为浅色模式")
    }
    Configuration.UI_MODE_NIGHT_UNDEFINED -> {
        println("未定义模式，默认按浅色处理")
    }
}

// 监听模式变化（需在 AndroidManifest 的 activity 中添加 android:configChanges="uiMode"）
override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    val newMode = newConfig.uiMode and Configuration.UI_MODE_NIGHT_MASK
    // 更新配色逻辑
}

Flutter 端 #

利用 MediaQuery 获取当前亮度，或通过生命周期方法监听变化：

// 初始检测
final brightness = MediaQuery.of(context).platformBrightness;
if (brightness == Brightness.dark) {
    print("当前为深色模式");
} else {
    print("当前为浅色模式");
}

// 监听模式切换
@override
void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    final newBrightness = WidgetsBinding.instance.window.platformBrightness;
    // 执行配色更新逻辑
}

内容的提问来源于stack exchange，提问作者John Ocean