angular - 离子如何以编程方式知道是否应用了深色主题？

Question

我正在使用 Ionic angular 和 Mapbox。我也想知道应用哪个主题来加载 mapbox 主题...

像这样的东西：

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

有什么方法可以根据应用程序中的主题调用 /mapbox/light-v10 或 /mabox/dark-v10 吗？

Answer 1

使用这个插件： 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);
    }
  }
}