Using dark mode with a webview

Question

I can't seem to be able to get android web view to use dark theme or use

@media (prefers-color-scheme: dark)

I am using AndroidX with DayNight theme

Does anyone has a solution that is backward compatible before api 29?

Answer 1

Add to your app's build.grade:

implementation "androidx.webkit:webkit:1.2.0"

You can check the latest version to use here:

https://developer.android.com/jetpack/androidx/releases/webkit

If you have a class that extends WebView, then add this in your extending class' constructor:

  public MyWebView(Context context, AttributeSet attrs) {
       super(context, attrs);

       ...
            
      if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
          WebSettingsCompat.setForceDark(getSettings(), WebSettingsCompat.FORCE_DARK_ON);
      }

      ...
  }

If you have an activity that that instantiates a webview, add this to the activity's onCreate method:

    myWebView = getViewById(R.id.web_content);
    if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
        WebSettingsCompat.setForceDark(myWebView.getSettings(),
                                       WebSettingsCompat.FORCE_DARK_ON);
    }

Of course, you might want to decide which force strategy you want:

WebSettingsCompat.FORCE_DARK_ON
WebSettingsCompat.FORCE_DARK_OFF
WebSettingsCompat.FORCE_DARK_AUTO