Ionic Capacitor Dark Mode

For detailed tutorial on how to enable dark mode using this plugin visit: https://medium.com/@hinddeep.purohit007/supporting-dark-mode-in-ionic-capacitor-8e57fe9dbd47

Platforms Supported: Android, iOS, Electron and Web/PWA

This plugin can be used to monitor the changes made to system's dark mode.

Installation

npm install capacitor-dark-mode

Android Configuration:

Open MainActivity.java and add the following code inside this.init()
add(DarkMode.class);
Adding the above mentioned line will add the following import statement:
import com.bkon.capacitor.DarkMode.DarkMode;
If you encounter errors, please add both the lines manually to MainActivity.java

Import the Plugin in your app

Open app.component.ts file and import the plugin as follows:
import { Plugins } from '@capacitor/core';

Listen for changes to Dark Mode:

Plugins.DarkMode.addListener("darkModeStateChanged", (state: any) => {
if(state.isDarkModeOn)
{
// Dark mode is on. Apply dark theme to your app
}
else
{
// Dark mode is off. Apply light theme to your app
}
if(state.supported == false)
{
// Dark mode is not supported by the platform

}

});