如何在Flutter webview_flutter中禁用小米MIUI强制暗色模式？

问题原因 #

该问题是小米MIUI系统的自定义特性：当系统开启暗色模式时，会默认对所有未明确声明关闭强制暗黑适配的WebView内容自动反色，与Flutter框架本身的暗色模式配置无关。

解决方案 #

方案1：Flutter端修复（优先推荐） #

全局关闭App的强制暗黑适配，一劳永逸解决所有WebView的适配问题：

• 找到项目路径下的android/app/src/main/res/values/styles.xml文件，在App的主题配置中添加属性：

<style name="你的App主题名" parent="你用的父主题">
    <!-- 原有其他主题配置保持不变 -->
    <item name="android:forceDarkAllowed">false</item>
</style>

• 如果项目存在android/app/src/main/res/values-night/styles.xml暗色主题配置文件，也需要在对应主题中添加上述相同配置。

如果不想全局关闭App的强制暗黑适配，仅针对WebView生效，可升级webview_flutter到4.0及以上版本，在WebViewController初始化完成后调用关闭强制暗黑的方法：

// 在onWebViewCreated回调中添加
if (Platform.isAndroid) {
  await _webViewController.setForceDark(ForceDark.off);
}

方案2：网页端修复（无需修改Flutter代码时使用） #

小米的强制暗黑逻辑仅对未明确声明色彩方案的网页生效，在网页代码中明确指定使用亮色模式即可避免被系统修改：

1. 在网页<head>标签中添加色彩方案声明的meta标签
2. 明确指定根元素和body的基础色彩，避免系统覆盖
   修改后的测试网页完整代码如下：

<html>
  <head>
    <meta name="color-scheme" content="only light">
    <style>
      :root { color-scheme: light; }
    </style>
  </head>
  <body style="
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #000000;
  ">
    <h1 style="font-family: Arial;">
      My WebView Page
    </h1>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Rafael Stefani Baptista