Flutter WebView加载网页时如何启用夜间模式？

在Flutter应用中，我使用WebView插件加载网页时，想为网页内容添加夜间模式功能。目前WebView默认加载的是网页的原始样式，但希望在用户切换夜间模式时，能够自动调整网页的背景色、文字颜色等元素，类似主流App的深色主题效果。尝试过通过CSS注入的方式修改样式，但遇到网页结构复杂时效果不理想。想请教：1）是否有成熟的方案或插件可以直接实现WebView的夜间模式？2）如果自行实现，如何高效地动态注入CSS或JavaScript来切换深色主题？3）在混合开发中，如何与原生平台的夜间模式状态同步？

3 回复

在 Flutter 中使用 WebView 加载网页并启用夜间模式，可以通过以下方式实现：

  1. CSS 过滤：利用 HtmlElementView 或 JavascriptChannel 向网页注入 CSS 样式来模拟夜间模式。例如，通过 JavaScript 动态添加 <style> 标签，将背景设为深色，文字改为浅色。

  2. WebView 配置：某些 WebView 插件（如 webview_flutter_plus）支持自定义 User-Agent 或请求拦截，可以尝试通过修改 User-Agent 告知服务器启用夜间模式，但这依赖于目标网站的支持。

  3. 系统级设置：若目标网站支持系统级别的暗黑模式适配（遵循 Android/iOS 的 Dark Mode 设置），确保 Flutter 应用启用了对应系统的夜间模式即可。

示例代码：

import 'package:webview_flutter/webview_flutter.dart';

WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    webViewController.evaluateJavascript("""
      const style = document.createElement('style');
      style.innerHTML = "body { background-color: #121212; color: #ffffff; }";
      document.head.appendChild(style);
    """);
  },
)

注意：部分网站可能不支持直接注入样式或夜间模式适配，效果取决于目标网页的实现。

更多关于Flutter WebView加载网页时如何启用夜间模式？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用WebView加载网页并启用夜间模式，可以通过设置WebView的请求头（Headers）来实现。具体步骤如下：

  1. 在WebView的initialUrl或onLoadStart方法中，拦截URL并添加请求头Sec-CH-UA和Color-Scheme，告知服务器当前设备处于暗黑模式。
  2. 示例代码：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class NightModeWebView extends StatefulWidget {
  @override
  _NightModeWebViewState createState() => _NightModeWebViewState();
}

class _NightModeWebViewState extends State<NightModeWebView> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: WebView(
        initialUrl: 'https://example.com',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          enableDarkMode();
        },
      ),
    );
  }

  void enableDarkMode() async {
    await _controller.evaluateJavascript("""
      window.matchMedia('(prefers-color-scheme: dark)').matches;
    """);
    // 或者通过HTTP请求头直接发送暗黑模式信号
    await _controller.setNavigationDelegate(
      NavigationDelegate(
        onHttpError: (int code, String url, Map<String, String> headers) {
          headers['Sec-CH-UA'] = '?1';
          headers['Color-Scheme'] = 'dark light';
        },
      ),
    );
  }
}

此代码会尝试通知服务器启用暗黑模式，并根据服务器响应调整页面样式。

在Flutter中使用WebView加载网页时，可以通过CSS注入的方式启用夜间模式。以下是使用官方webview_flutter插件的实现方法：

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

class NightModeWebView extends StatefulWidget {
  @override
  _NightModeWebViewState createState() => _NightModeWebViewState();
}

class _NightModeWebViewState extends State<NightModeWebView> {
  late WebViewController _controller;

  final _nightModeCSS = """
    body {
      background-color: #121212 !important;
      color: #e0e0e0 !important;
    }
    a {
      color: #bb86fc !important;
    }
    img, video {
      filter: brightness(0.8) !important;
    }
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("夜间模式WebView")),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _controller = controller;
        },
        onPageFinished: (url) {
          _controller.runJavascript(
            'document.head.innerHTML += \'<style>$_nightModeCSS</style>\';'
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.nightlight),
        onPressed: () {
          _controller.runJavascript(
            'document.querySelector("style").textContent = \'$_nightModeCSS\';'
          );
        },
      ),
    );
  }
}

主要步骤：

  1. 定义一个夜间模式的CSS样式
  2. 在页面加载完成后(onPageFinished)注入CSS
  3. 通过按钮可以切换夜间模式
  4. 样式调整包括背景色、文字颜色、链接颜色和图片亮度

对于更复杂的网页，可能需要调整CSS选择器或添加更多样式规则。

回到顶部