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
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" />
- Android
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
.
$ cordova plugin add cordova-plugin-android-dark-mode-support
$ cordova plugin add https://github.com/timbru31/cordova-plugin-android-dark-mode-support.git
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.