在Ionic5 Angular中从暗模式切换到浅色模式时更改图像

import { Platform } from '@ionic/angular';

constructor(private platform: Platform) {
  this.initializeApp();
}

initializeApp() {
  this.platform.ready().then(() => {
    if (this.platform.is('cordova')) {
      // 检查是否支持暗模式
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.toggle('dark');
      }
    }
  });
}

.dark {
  // 暗模式下的样式
}

.light {
  // 浅色模式下的样式
}

<img [ngClass]="{'dark-image': isDarkMode, 'light-image': !isDarkMode}" src="path/to/image.png" alt="Image">

import { Component, HostBinding } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.scss'],
})
export class HomeComponent {
  @HostBinding('class.dark') isDarkMode: boolean;

  constructor(private platform: Platform) {
    this.checkDarkMode();
  }

  checkDarkMode() {
    if (this.platform.is('cordova')) {
      // 检查是否支持暗模式
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        this.isDarkMode = true;
      } else {
        this.isDarkMode = false;
      }
    }
  }
}