Letting WebView on Android work with prefers-color-scheme: dark

Question

I have an Android App that uses webview, and lately I\'m trying to figure out how to add a dark theme by using the new @media (prefers-color-scheme: dark) CSS s

Answer 1

I don't think WebView honours the prefers-color-scheme CSS media query yet.

The new API for setForceDark has three states: on, off or auto.

ON - your content will always be rendered darker everytime.

OFF - your content will always be rendered light everytime.

AUTO - the content will be rendered darker if your app's theme is darker OR the device OS is in dark mode because the user toggles the OS level switch or battery saver mode turned on.

I believe support for older versions of Android and also control over whether to use prefers-color-scheme instead of WebView's force dark is coming soon via AndroidX. Due date is unknown at present.

For now I would recommend setting the WebView to setForceDark Auto. This will work on Android Q and above.

I would keep an eye on AndroidX release notes for the rest of the support you require for devices on Android P and below.