如何在Flutter的webview_flutter组件中禁用自动暗模式适配功能？

问题原因 #

webview_flutter默认会跟随系统或应用的主题模式，当系统或应用开启暗模式时，WebView会自动适配，加载网页的暗色版本，部分高版本Android系统还会强制对未适配暗模式的网页做暗色反转。

具体解决步骤 #

• 第一步：强制应用全局使用亮色模式
  在MaterialApp配置中明确指定themeMode为ThemeMode.light，禁止应用跟随系统暗模式切换主题
• 第二步：Android端禁用WebView强制暗模式
  打开Android项目路径下的android/app/src/main/AndroidManifest.xml，在activity标签中添加属性android:forceDarkAllowed="false"，禁止系统强制给WebView应用暗模式
• 第三步：（可选，适配所有网页）注入CSS强制网页使用亮色模式
  如果上述两步依旧有部分网页显示暗色，可通过WebView注入JS代码，强制覆盖网页的暗模式媒体查询规则

修改后的完整代码 #

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
    // 初始化WebViewController
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'))
      // 注入强制亮色模式的JS代码
      ..runJavaScript("""
        document.documentElement.style.colorScheme = 'light';
        const style = document.createElement('style');
        style.textContent = '@media (prefers-color-scheme: dark) { :root { color-scheme: light !important; } }';
        document.head.appendChild(style);
      """);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 强制使用亮色主题，不跟随系统
      themeMode: ThemeMode.light,
      theme: ThemeData(brightness: Brightness.light),
      home: Scaffold(
          appBar: AppBar(
            title: const Text("Mobile App"),
            backgroundColor: Colors.blueGrey,
          ),
          body: WebViewWidget(controller: _controller)),
      debugShowCheckedModeBanner: false,
    );
  }
}

注：如果你使用的是webview_flutter 3.x及以下旧版本，不需要单独声明WebViewController，直接在WebView组件的onPageFinished回调中执行上述JS代码即可。

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