Disable dark mode in web view

Question

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

Solution 1

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>

Solution 2

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.😁

Comments

[John Joe]

what should I put in ThemeData ?

[epynic]

ThemeData.light() ?

[John Joe]

the content still change color

[Salih Can]

Can you put brightness: Brightness.light

[Rohmatul Laily]

how about IOS ?

[Hasindu Lanka]

It worked when it's added to both android/app/src/main/res/values/styles.xml and android/app/src/main/res/values-night/styles.xml . Thanks! You saved my day.

[m93a]

Sadly, doesn't work on Xiaomi Redmi with Mi Browser set as the webview renderer.