How to force dark web pages in android webview?

Question

If we enable chrome://flags/#enable-force-dark flag in chrome browser on android then web page becomes dark.

I want to achieve similar thing (i.e. dark web ui) in android webview.

Currently I am using following code:

  private void injectCSS() {
        
       String code = "javascript:(function() {" +
                 "var node = document.createElement('style');"+
                 "node.type = 'text/css';"+
                   " node.innerHTML = 'body, label,th,p,a, td, tr,li,ul,span,table,h1,h2,h3,h4,h5,h6,h7,div,small {"+
                   "     color: #deFFFFFF;"+
                        "background-color: #232323;"+
                   " } ';"+
                   " document.head.appendChild(node);})();";

        webView.evaluateJavascript(code,null);
     
    }

I run this code in:

    @Override
    public void onProgressChanged(WebView view, final int 
            newProgress) {
              super.onProgressChanged(view, newProgress);
              injectCSS();
             }

    @Override
    public void onPageStarted(final WebView view, String url, 
       Bitmap favicon) {
             injectCSS();
             super.onPageStarted(view, url, favicon);    
      }

   @Override
    public void onPageFinished(WebView view, final String url) 
      {
          injectCSS();
          super.onPageFinished(view, url);
      }

Now I get near about same dark web pages like chrome. But I want to improve this code because it has some issues like anchor links not gets displayed properly. Suggest any better technique (if available)

Anoop M Maddasseri · Accepted Answer · 2020-06-24T06:59:35.323

3

If you see androidx.webkit:webkit:1.3.0-beta01 change logs you could see ForceDark API added to control if WebView should be rendered in dark mode. You can use ForceDarkStrategy API to control WebView darkening (CSS/web content darkening versus auto darkening).

Prior try to access this feature ensure that it is supported by the Webview is being used in. For this, the WebViewFeature class have an isFeatureSupported() function, which can be used to check if a given feature is supported. So before we go ahead and set the support for dark mode check if it is supported:

if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... }

There are 3 different constants available in WebSettingsCompat to configure -

FORCE_DARK_OFF – Disable the force dark mode for the webview, meaning the content of the webview will be rendered as-is
FORCE_DARK_ON – Enable the force dark mode for the webview, meaning the content of the webview will always be rendered with a dark theme
FORCE_DARK_AUTO – Enable the force dark mode for the webview depending on the state of the parent view, meaning that the system dark mode setting will be followed when rendering the content of the webview.

Apply it accordingly using setForceDark function-

WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)

edited Jun 24 '20 at 06:59

answered Jun 24 '20 at 05:44

Anoop M Maddasseri

10,213
3
52
73

Hey what is minimum api level requirement for this to work? I tested on emulator with minimum api 24 and it did not worked. So is there any minimum api requirement? Or this needs updated webview which emulator does not has? – Chaitanya Karmarkar Jun 24 '20 at 06:35
1

You can notice that we use `WebSettingsCompat` to set the dark mode that means backward-compatibility. As I mentioned in the answer, the WebView environment has to support it. – Anoop M Maddasseri Jun 24 '20 at 06:40
I tested on real device which also runs on api 24 and it works over there but it does not works on emulator which has api 24 system. I think it requires updated system webview. – Chaitanya Karmarkar Jun 24 '20 at 06:43
https://stackoverflow.com/questions/57449900/letting-webview-on-android-work-with-prefers-color-scheme-darkHey accepted answer in this question has a note which says "The setForceDark feature requires Android System WebView v76 or up to be installed on the running device." This confirms that updated system webview is required. – Chaitanya Karmarkar Jun 24 '20 at 06:44
Right, there is no other straight forward way to enable dark mode in WebView if it doesn't support. This was a major problem for the apps that uses a dark theme. OTOH, If you want to support WebView that doesn't support dark theme google's recommendation is to modify your WebView content with custom styling for Dark Theme. The prefers-color-scheme: dark @media query provides developers with a way to define custom styling for a Dark Theme similar to the way Android allows you to provide night-conditional resources. – Anoop M Maddasseri Jun 24 '20 at 06:46
1

Yes I agree with you. Thanks for your help. – Chaitanya Karmarkar Jun 24 '20 at 06:50

How to force dark web pages in android webview?

1 Answers1