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.