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
}
});