在 Web 视图中禁用暗模式答案

【问题标题】：Disable dark mode in web view在 Web 视图中禁用暗模式
【发布时间】：2021-09-07 13:22:56
【问题描述】：

我正在 Flutter 中开发一个应用程序（带有 webview），当在设备上激活暗模式时，webview 会更改 web 的颜色（文本和背景）以使其变暗，从而产生可怕的结果。

有没有办法在网页视图中禁用暗模式？

【问题讨论】：

【解决方案1】：

我认为插件没有“忽略主题模式”之类的参数。但是，您可以简单地尝试以下方法。

Theme(
                  data: ThemeData(
                    // Unique Theme Data
                  ),
                  child: InAppWebView(
                    //....
                  ),
                ),

【讨论】：

我应该在 ThemeData 中放什么？
你能不能把brightness: Brightness.light

【解决方案2】：

您可以通过将所需小部件包装在 Theme 小部件中来覆盖当前主题。类似于：

 @override
  Widget build(BuildContext context) {
    return new Theme(
      child: InAppWebViewWidget(),
      data: new ThemeData.light()
    );
  }

【讨论】：

ThemeData.light() ?
内容还是会变色

【解决方案3】：

我设法通过在android/app/src/res/values/styles.xml 中添加这一行来修复它：

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

这是我的完整代码


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

【讨论】：

IOS怎么样？
当它被添加到 android/app/src/main/res/values/styles.xml 和 android/app/src/main/res/values-night/styles.xml 时它工作。谢谢！你拯救了我的一天。

【解决方案4】：

这个问题被浏览了超过 973 次，我无法停止发帖的冲动。

你不能在颤动中做到这一点。你需要在 webview 插件中编辑原生 android 代码。

我用android studio在下面找到webview插件源代码：外部库>Flutter 插件>webview_flutter-2.0.13

你也可以使用 vs 代码。

所以现在你需要编辑包中的 2 个文件

build.gradle 下 webview_flutter-2.0.13>安卓像这样

dependencies {
    implementation 'androidx.annotation:annotation:1.0.0'
    implementation 'androidx.webkit:webkit:1.2.0' //here update the version to 1.2.0
    testImplementation 'junit:junit:4.12'
    testImplementation 'org.mockito:mockito-inline:3.11.1'
    testImplementation 'androidx.test:core:1.3.0'
}

保存。

接下来是 webview_flutter-2.0.13/android/src/main/java/io/flutter/plugins/webviewflutter/WebViewBuilder.java 文件。

你需要导入一些东西或更好地替换

package io.flutter.plugins.webviewflutter;
import android.content.Context;
import android.view.View;
import android.webkit.DownloadListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.webkit.WebViewFeature;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.webkit.WebSettingsCompat;

在同一个文件中你要修改'build'方法：

public WebView build() {
    WebView webView = WebViewFactory.create(context, usesHybridComposition, containerView);
    //this is the thing that we add
    if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
      WebSettingsCompat.setForceDark(webView.getSettings(), WebSettingsCompat.FORCE_DARK_OFF);
    }
    WebSettings webSettings = webView.getSettings();
    webSettings.setDomStorageEnabled(enableDomStorage);
    webSettings.setJavaScriptCanOpenWindowsAutomatically(javaScriptCanOpenWindowsAutomatically);
    webSettings.setSupportMultipleWindows(supportMultipleWindows);
    webView.setWebChromeClient(webChromeClient);
    webView.setDownloadListener(downloadListener);
    return webView;
  }

我懒惰的伙伴们，你们去吧。?

【讨论】：