Capacitor plugin for seamless Android dark mode support. Enhance user experience with prefers-color-scheme CSS media feature compatibility.
The Android Dark Mode Support plugin is typically used whenever an app should respect the system-wide dark mode setting on Android, for example:
- Automatic dark theme switching: Apply dark styles with
prefers-color-schemeCSS media queries that correctly reflect the Android system setting. - Consistent theming: Ensure the web view of your Capacitor app matches the user's system-wide dark mode preference without a manual in-app toggle.
- Framework theming: Let UI frameworks whose dark themes rely on the
prefers-color-schememedia feature switch themes correctly on Android.
| Plugin Version | Capacitor Version | Status |
|---|---|---|
| 8.x.x | >=8.x.x | Active support |
You can use our AI-Assisted Setup to install the plugin. Add the Capawesome Skills to your AI tool using the following command:
npx skills add capawesome-team/skills --skill capacitor-pluginsThen use the following prompt:
Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-android-dark-mode-support` plugin in my project.
If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:
npm install @capawesome/capacitor-android-dark-mode-support
npx cap syncIf needed, you can define the following project variable in your app’s variables.gradle file to change the default version of the dependency:
$androidxWebkitVersionversion ofandroidx.webkit:webkit(default:1.9.0)
This can be useful if you encounter dependency conflicts with other plugins in your project.
No configuration required for this plugin.
A working example can be found here: robingenz/capacitor-plugin-demo
The plugin only needs to be installed.
It enables the correct behavior of the prefers-color-scheme CSS media feature.
By default, the prefers-color-scheme CSS media feature may not correctly reflect the system dark mode setting in the Android web view. This plugin enables the correct behavior of the media feature so that your CSS dark mode styles are applied when the user has enabled dark mode on their device.
No, the plugin only needs to be installed. Once installed, it enables the correct behavior of the prefers-color-scheme CSS media feature without any additional code. See the Usage section for more information.
No, this plugin only provides an Android implementation, as the name suggests. It exists to fix the dark mode behavior of the Android web view.
Yes, you can define the $androidxWebkitVersion project variable in your app's variables.gradle file to change the default version (1.9.0) of the androidx.webkit:webkit dependency. This can be useful if you encounter dependency conflicts with other plugins in your project.
Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
- Accessibility Preferences: Read the user's system accessibility preferences.
- Android Edge-to-Edge Support: Support edge-to-edge display on Android and set the background color of the status bar and navigation bar.
- Navigation Bar: Set the background color and button style of the navigation bar.
Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our Capawesome Newsletter.
See CHANGELOG.md.
See LICENSE.