Cordova打包Android应用颜色异常：强制深色模式覆盖自定义主题

环境与操作流程 #

• 使用Material UI + React开发应用，通过Cordova打包Android版本，执行命令：

  cordova create appname
  cordova platform add android
  cordova build android
  

• 将Cordova项目的www目录设为React项目build目录的符号链接

异常现象 #

• Android模拟器运行正常，显示浅色主题；但安装到小米Mi 9T（MIUI 12.1.4.0，基于Android 11）后，颜色异常：部分颜色反转、过暗，本该始终浅色的登录页面变成深色
• 应用内置深色模式检测逻辑，希望优先使用自定义逻辑而非Cordova强制修改颜色
• PWA或Chrome中打开时，能根据设备偏好正确切换主题；但Cordova打包版本：
  • 设备设为浅色模式时，显示应用的深色主题
  • 设备设为深色模式时，叠加强制深色效果，颜色进一步异常

现有config.xml内容 #

<?xml version='1.0' encoding='utf-8'?>
<widget id="app.platelet.platelet" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>platelet.app</name>
    <description>platelet dispatch for blood bikes</description>
    <author email="info@platelet.app" href="https://platelet.app">
        platelet.app
    </author>
    <content src="/" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <platform name="android">
        <!--
            ldpi    : 36x36 px
            mdpi    : 48x48 px
            hdpi    : 72x72 px
            xhdpi   : 96x96 px
            xxhdpi  : 144x144 px
            xxxhdpi : 192x192 px
        -->
        <icon src="icon/ldpi.png" density="ldpi" />
        <icon src="icon/mdpi.png" density="mdpi" />
        <icon src="icon/hdpi.png" density="hdpi" />
        <icon src="icon/xhdpi.png" density="xhdpi" />
        <icon src="icon/xxhdpi.png" density="xxhdpi" />
        <icon src="icon/xxxhdpi.png" density="xxxhdpi" />
    </platform>
</widget>

解决方案 #

1. 配置Cordova禁用强制深色模式 #

在config.xml的<platform name="android">节点内添加以下配置，直接禁用系统和Cordova的强制深色干预：

<preference name="AndroidXAppCompatTheme" value="@style/Theme.AppCompat.Light.NoActionBar" />
<preference name="AndroidForceDarkMode" value="false" />

<edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
    <application android:forceDarkAllowed="false" />
</edit-config>

• AndroidXAppCompatTheme指定使用浅色基础主题，避免系统自动切换深色
• AndroidForceDarkMode禁用Cordova自带的深色模式适配
• android:forceDarkAllowed针对MIUI等定制系统，彻底禁止应用被强制深色

2. 强化React/Material UI的主题控制逻辑 #

在React应用入口文件中，明确自定义主题检测逻辑，确保优先使用应用自身的判断：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { useMediaQuery } from '@mui/material';

function App() {
  // 优先读取用户自定义设置，无设置时再跟随系统偏好
  const savedTheme = localStorage.getItem('app-theme');
  const prefersDarkMode = savedTheme === 'dark' 
    ? true 
    : savedTheme === 'light' 
      ? false 
      : useMediaQuery('(prefers-color-scheme: dark)');

  const theme = createTheme({
    palette: {
      mode: prefersDarkMode ? 'dark' : 'light',
    },
  });

  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用组件 */}
    </ThemeProvider>
  );
}

3. 配置WebView禁止自动颜色反转 #

在React项目public/index.html的<head>中添加meta标签，明确控制WebView的颜色适配：

<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />

该配置告知WebView，应用自身支持深浅主题，无需系统自动修改颜色。

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