Skip to content

⚫ ⚪ 📱 Cordova plugin to detect whether dark mode is enabled or not

Notifications You must be signed in to change notification settings

ianrobertsFF/cordova-plugin-theme-detection

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm npm NPM

Cordova plugin for theme detection

Donation

If you like this plugin feel free to by me a beer 🍻. So I can maintain this and other plugins and projects.

https://www.paypal.me/mariusb73/5

Description

This plugin detects whether the dark mode is enabled on the device or not.

iOS 13+ must be installed on your device, to use this plugin. For Android you can use it since Android 9 (Pie). The Browser platform requires window.matchMedia() support.

Installation

Add the plugin with the following command:

cordova plugin add cordova-plugin-theme-detection

Usage

cordova.plugins.ThemeDetection.methodName(
  [parameter],
  function(success) {
    console.log(success);
  },
  function(error) {
    console.log(error);
  }
);

Ionic Native

If you are using Ionic, use the Ionic Native Wrapper. Install it with npm install @ionic-native/theme-detection.

Import the plugin in your app.module:

 @NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    ThemeDetection,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

And import and use it in every of your components:

import { ThemeDetection } from "@ionic-native/theme-detection/ngx";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html"
})
export class HomePage {
  constructor(private themeDetection: ThemeDetection) {}

  private async isAvailable(): Promise<ThemeDetectionResponse> {
    try {
      let dark_mode_available: ThemeDetectionResponse = await this.themeDetection.isAvailable();
    } catch (e) {
      console.log(e);
    }
  }

  private async isDarkModeEnabled(): Promise<ThemeDetectionResponse> {
    try {
      let dark_mode_enabled: ThemeDetectionResponse = await this.themeDetection.isDarkModeEnabled();
    } catch (e) {
      console.log(e);
    }
  }
}

Methods

isAvailable

cordova.plugins.ThemeDetection.isAvailable()

Checks whether the device is running on iOS 13 or Android 9 or newer and returns an object with a boolean value and a message.

isDarkModeEnabled

cordova.plugins.ThemeDetection.isDarkModeEnabled()

Checks whether the dark mode is enabled on device and returns an object with a boolean value and a message.

Responses

ThemeDetectionResponse:

ThemeDetectionResponse {
    value: boolean;
    message: string;
}

Common issues

UIUserInterfaceStyle

If you have set the following Property in your config.xml file, the plugin will always return false:

<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
  <string>Light</string>
</config-file>

Please remove this property from config.xml.

Changelog

  • 1.3.0: Add browser platform support
  • 1.2.1: Updated README
  • 1.2.0: Bugfix for Android 10
  • 1.1.3: Updated from beta
  • 1.1.2: Fix in documentation
  • 1.1.1: Updated documentation for Android
  • 1.1.0: Addded Android support
  • 1.0.3: Update README.md for Ionic Native Wrapper support.
  • 1.0.1: iOS Version Info if Plugin is not available.
  • 1.0.0: Initial version support for iOS.

About

⚫ ⚪ 📱 Cordova plugin to detect whether dark mode is enabled or not

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 50.5%
  • Swift 30.7%
  • JavaScript 18.8%