Ionic how to know programmatically if the dark theme is applied?

Question

I'm working with Ionic angular and Mapbox. I want to know which theme is applied to load the mapbox theme too...

something like this:

const currentIonicTheme = ionic.theme.apllied; // here is where I want to know how to get the current theme in the app
const map = new mapboxgl.Map({
  style: `mapbox://styles/mapbox/${currentIonicTheme}-v10`,
  center: [this.lng, this.lat],
  zoom: 15.5,
  pitch: 45,
  bearing: -17.6,
  container: 'map',
  antialias: true
});

is there any way to do this to call /mapbox/light-v10 or /mabox/dark-v10 depending of the theme in the app?

Answer 1

Use this Plugin: cordova-plugin-theme-detection

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