webview_flutter 3.0.4：暗黑模式无法正常工作问题求助

以下是几种可行的解决方案，根据你的实际场景选择：

1. 给WebView注入暗黑模式CSS样式 #

如果加载的网页本身没有适配暗黑模式，你可以通过WebViewController动态注入CSS代码，强制调整页面样式：

• 首先，在主题切换时（或初始化时），获取WebViewController实例并执行JS代码：

// 假设isDarkMode是你的主题状态变量
await _webViewController.evaluateJavascript('''
// 设置页面背景色
document.documentElement.style.backgroundColor = '#121212';
document.body.style.backgroundColor = '#121212';
// 调整文本颜色
document.body.style.color = '#ffffff';
// 调整链接颜色
document.querySelectorAll('a').forEach(el => el.style.color = '#4fc3f7');
// 可以根据网页结构添加更多元素的样式调整
''');

如果是你自己开发的网页，更推荐直接在网页代码里用CSS媒体查询适配：

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #121212;
    color: #ffffff;
  }
  a {
    color: #4fc3f7;
  }
  /* 其他元素的暗黑样式 */
}

这样WebView会自动识别系统或应用的主题设置，无需额外注入代码。

2. 使用第三方WebView包的暗黑模式配置 #

如果你用的是flutter_inappwebview（功能比官方webview_flutter更丰富），可以直接利用其平台专属的暗黑模式配置：

Android端 #

InAppWebView(
  initialSettings: InAppWebViewSettings(
    // 根据主题动态设置强制暗黑模式
    forceDark: isDarkMode ? ForceDark.FORCE_DARK_ON : ForceDark.FORCE_DARK_OFF,
  ),
  onWebViewCreated: (controller) {
    _webViewController = controller;
  },
)

iOS端 #

InAppWebView(
  initialSettings: InAppWebViewSettings(
    preferredContentMode: isDarkMode 
        ? UserPreferredContentMode.DARK 
        : UserPreferredContentMode.LIGHT,
  ),
)

3. 同步WebView控件的背景色 #

有时候WebView本身的背景色会覆盖网页样式，先确保Flutter侧的WebView控件背景色跟随主题：

WebView(
  backgroundColor: isDarkMode ? Colors.black : Colors.white,
  // 其他配置项
)

注意事项 #

• 如果加载的是第三方网页，注入CSS时可能需要针对不同页面结构调整选择器，避免样式冲突
• 官方webview_flutter目前没有直接的暗黑模式开关，依赖注入CSS或控件背景色调整

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