https://github.com/moots-technology/moots-capacitor-dark-mode

Capacitor 3 plugin for automatic dark mode detection.
https://github.com/moots-technology/moots-capacitor-dark-mode

android capacitor capacitor-plugin dark dark-mode darkmode ionic ios

Last synced: about 1 month ago
JSON representation

Capacitor 3 plugin for automatic dark mode detection.

• Host: GitHub
• URL: https://github.com/moots-technology/moots-capacitor-dark-mode
• Owner: moots-technology
• License: mit
• Created: 2022-01-17T14:33:33.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-07T09:12:56.000Z (about 2 years ago)
• Last Synced: 2023-08-24T04:51:38.584Z (over 1 year ago)
• Topics: android, capacitor, capacitor-plugin, dark, dark-mode, darkmode, ionic, ios
• Language: Java
• Homepage:
• Size: 1.63 MB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Node.js CI](https://github.com/moots-technology/moots-capacitor-dark-mode/actions/workflows/node.js.yml/badge.svg)](https://github.com/moots-technology/moots-capacitor-dark-mode/actions/workflows/node.js.yml)

# 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](https://ionicframework.com/docs/theming/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](https://mootstech.com.au/) 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.