Flutter webview被系统强制触发深色模式显示异常怎么解决？

核心原因 #

该问题是Android、iOS系统原生WebView组件自带的深色模式自动反转特性导致的，和Flutter应用层的themeMode配置没有关联，所以仅设置ThemeMode.light不会生效。

分平台修复方案 #

Android平台 #

• 如果你使用官方webview_flutter插件，初始化WebViewController时单独关闭强制深色模式即可：

import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

late final WebViewController controller = WebViewController()
  ..setBackgroundColor(const Color(0xFFFFFFFF))
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('你的网页访问地址'));

// Android端关闭强制深色反转
if (Platform.isAndroid) {
  final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;
  androidController.setSettings(
    AndroidWebSettings(
      forceDark: ForceDark.off,
    ),
  );
}

• 如上述配置不生效，可在Android原生项目app/src/main/res/values/styles.xml的主主题节点下添加属性：

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

iOS平台 #

• 同样针对webview_flutter插件，单独配置iOS端WKWebView的外观属性：

import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

// iOS端强制使用浅色外观
if (Platform.isIOS) {
  final WebKitWebViewController iosController = controller.platform as WebKitWebViewController;
  iosController.setSettings(
    WebKitWebSettings(
      appearance: WebKitAppearance.light,
    ),
  );
}

网页端补充配置 #

可以在你开发的网页head标签中添加CSS规则，直接声明页面仅支持浅色模式，从根源避免系统自动调整样式：

:root {
  color-scheme: light only;
}
/* 强制锁定基础样式避免被系统覆盖 */
body {
  background: #ffffff !important;
  color: #333333 !important;
}

额外校验 #

确认Flutter项目中MaterialApp的配置同时指定了theme和darkTheme为浅色主题，避免部分场景下的系统 fallback：

MaterialApp(
  title: '你的应用名称',
  theme: ThemeData(brightness: Brightness.light),
  darkTheme: ThemeData(brightness: Brightness.light),
  themeMode: ThemeMode.light,
  home: const HomePage(),
)

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