moots-capacitor-dark-mode

Moots Capacitor Dark Mode

This capacitor 3 plugin automatically changes the style of your app depending on system theme selection. If the user selects dark mode, then the app will switch to dark mode and vice versa. In detail it enables the correct behavior of the prefers-color-scheme CSS media feature for the ionic Dark Mode on Android and iOS devices without the need for configuration.

Installation

Simply install the dependency, capacitor will automatically pick up the plugin on your next sync command.

npm install moots-capacitor-dark-mode

Explanation

By default the ionic dark mode out of the box only works on web devices, because the prefers-color-scheme: dark media query is not set on android and ios even if the system is set to be in dark mode. This plugin adds the native code neccessary to read the system's theme setting and set the media query inside the app approriately. Thus it will now match the system's selected theme.

About Moots

moots technology is an Adelaide, South Australia based consultancy and software development company with a huge expertise in usage requirements analysis and cloud architecture frameworks for creating modern software solutions. Hereby we prioritise high usability and amazing UX over adding further features.