cordova-plugin-android-dark-mode-support

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.