Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

🌚/🌞 Apache Cordova plugin to enable proper dark mode support for Android WebView's
https://github.com/timbru31/cordova-plugin-android-dark-mode-support

android capacitor capacitor-plugin cordova cordova-android cordova-android-plugin cordova-plugin dark-mode ionic ionic-plugin kotlin phonegap phonegap-plugin

Last synced: 4 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
# cordova-plugin-android-dark-mode-support



[![Linting](https://github.com/timbru31/cordova-plugin-android-dark-mode-support/workflows/Linting/badge.svg)](https://github.com/timbru31/cordova-plugin-android-dark-mode-support/actions?query=workflow%3ALinting)

[![npm audit](https://github.com/timbru31/cordova-plugin-android-dark-mode-support/workflows/Security/badge.svg)](https://github.com/timbru31/cordova-plugin-android-dark-mode-support/actions?query=workflow%3ASecurity)



[![Known Vulnerabilities](https://snyk.io/test/github/timbru31/cordova-plugin-android-dark-mode-support/badge.svg)](https://snyk.io/test/github/timbru31/cordova-plugin-android-dark-mode-support)



[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://commitizen.github.io/cz-cli/)

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

[![npm](https://img.shields.io/npm/v/cordova-plugin-android-dark-mode-support.svg)](https://www.npmjs.com/package/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](https://developer.android.com/about/versions/13/behavior-changes-13). All you need to do is tweak the used theme by setting:

```xml



```



### 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.