如何修改Flutter WebView中YouTube默认的深色主题？

Flutter的Theme组件只能管控原生控件样式，WebView加载的网页内容不受其影响，所以你添加ThemeData.light()不会改变YouTube页面的主题。下面是两种可行的解决办法：

方案1：修改URL参数强制浅色主题 #

直接在YouTube频道链接末尾追加?theme=light参数，YouTube会自动加载浅色主题页面，这是最稳定的官方支持方式。

修改后的代码示例：

Theme(
  data: ThemeData.light(),
  child: WebView(
    initialUrl: 'https://www.youtube.com/channel/XXXXXX/videos?theme=light',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      _controller.complete(webViewController);
    },
  ),
)

方案2：注入JavaScript切换主题 #

如果URL参数方法失效，可以在页面加载完成后注入JS代码强制切换主题。注意这种方法依赖YouTube的页面结构，后续YouTube更新可能导致代码失效。

代码示例：

WebView(
  initialUrl: 'https://www.youtube.com/channel/XXXXXX/videos',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
  onPageFinished: (String url) {
    _controller.then((controller) {
      controller.evaluateJavascript('''
        document.documentElement.setAttribute('dark', 'false');
      ''');
    });
  },
)

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