cordova-plugin-android-dark-mode-support

Apache Cordova plugin to enable proper dark mode support for Android WebView's

Context/Background

While Android supports a dark mode since API level 29 (Android 10), Android WebView's need explicit support for this. This plugin changes the used Cordova WebView, no matter if the default from cordova-android or a custom one such as the cordova-plugin-ionic-webview to enable or disable the dark mode. This results in a correct usage of the (prefers-color-scheme: dark) media query.

Additionally, when the native configuration changes, it is re-evaluated whether the dark mode is currently active.

Under the hood, the Configuration.UI_MODE_NIGHT_YES, WebSettingsCompat.setForceDark and WebSettingsCompat.setForceDarkStrategy are used. You can read more here: https://developer.android.com/guide/webapps/dark-theme

Attention for SDK >= 33 / Android 13

In Android 13 (SDK 33) you do not this plugin anymore as the behavior was changed again. All you need to do is tweak the used theme by setting:

<preference name="AndroidPostSplashScreenTheme" value="@style/Theme.AppCompat.DayNight.NoActionBar" />

Supported platforms

• Android

Prerequisites/Warnings

Kotlin support is required. Due to the AndroidX support libraries used, only cordova-android >= 11.0.0 is supported.
You need to enable Kotlin config.xml by setting GradlePluginKotlinEnabled to true.

Installation

from npm (recommended)

$ cordova plugin add cordova-plugin-android-dark-mode-support

from git (unstable)

$ cordova plugin add https://github.com/timbru31/cordova-plugin-android-dark-mode-support.git

Usage

Just install the plugin. Initially it will check the dark mode settings of the device and update once a new configuration is received.
For a instance a timed/schedule theme change can issue a new configuration.

---

Built by (c) Tim Brust and contributors. Released under the MIT license.