Disable dark mode in web view

Viewed 3216

I am developing an application in Flutter (with a webview) and when dark mode is activated on the device, the webview changes the colors of the web (text and background) to make it dark, creating a horrible result.

Is there a way to disable dark mode in web view?

I'm using this plugin flutter_webview_plugin

4 Answers

I managed to fix it by adding this line in android/app/src/res/values/styles.xml:

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

Here my full code


<?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>

this question being Viewed over 973 times, i couldn't stop the urge to post.

you cant do it form within flutter. youll nedd to edit the native android code in webview plugin.

i used android studio find the webview plugin source code under: External Libraries>Flutter Plugins>webview_flutter-2.0.13

you can use vs code too.

so now you'll need to edit 2 files in the package

  1. build.gradle under webview_flutter-2.0.13>android as such
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'
}

save.

next is the webview_flutter-2.0.13/android/src/main/java/io/flutter/plugins/webviewflutter/WebViewBuilder.java file.

youll need to import few things or better replace

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;

in the same file you want to modify the 'build' method:

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;
  }

and there you go my lazy fellows.

You can override the current theme by wrapping the desired widget in a Theme widget. Something similar to:

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

I think the plugin doesn't have a parameter like 'ignore theme mode'. But, you can simply try the below method.

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

Related