search

mariusbackes / cordova-plugin-theme-detection

:black_circle: :white_circle: :iphone: Cordova plugin to detect whether dark mode is enabled or not
24 stars 14 forks source link

readme

npm npm NPM

Cordova plugin for theme detection

Donation

If you like this plugin feel free to by me a beer :beers:. 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