dark mode干扰背景色显示，如何让APP在任意模式下获得一致色彩？

当前iOS 13+、Android 10+及以上版本的系统默认会对未主动适配暗黑模式的App做自动颜色调整，你代码中写死的固定backgroundColor会被系统根据当前明暗模式做色调修正，才会出现不同模式下颜色显示不一致的问题。

方案1：禁用系统自动暗黑模式适配（最快实现全模式颜色一致） #

直接强制App固定运行在单一模式，完全不受系统明暗模式切换影响：

• iOS端：在项目ios/[项目名]/Info.plist文件中添加配置，强制App始终使用亮色模式：

  <key>UIUserInterfaceStyle</key>
  <string>Light</string>
  

• Android端：在项目android/app/src/main/res/values/styles.xml的主App主题中添加配置，禁止系统对App强制做暗黑模式颜色转换：

  <item name="android:forceDarkAllowed">false</item>
  

方案2：自定义颜色适配逻辑（可灵活控制不同模式下的颜色） #

如果后续需要做明暗模式适配，也可以自行监听系统模式，手动控制颜色取值，避免系统自动修正：

1. 引入React Native原生提供的AppearanceAPI获取当前系统模式
2. 自定义明暗两套颜色表，需要颜色一致的场景直接给两套色值设为同一个值即可
   示例代码如下：

import { Appearance, View } from 'react-native';

// 自定义颜色映射表
const colorSet = {
  light: {
    commonBg: 'yellow'
  },
  dark: {
    commonBg: 'yellow' // 明暗模式设为相同值即可保持显示一致
  }
}

// 获取当前系统模式，默认降级为亮色模式
const currentMode = Appearance.getColorScheme() ?? 'light';
const appColors = colorSet[currentMode];

// 组件中使用自定义色值
const DemoComponent = () => {
  return <View style={{backgroundColor: appColors.commonBg}}></View>
}

如果你项目中使用了第三方UI组件库（如NativeBase、Ant Design RN等），需要额外关闭UI库自带的暗黑模式自动适配开关，否则组件库也会自动调整颜色导致显示异常。

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