在 ionic v7 和 Angular 17 中，如何在运行时（动态）在浅色和深色主题之间切换

Question

我注意到当手机主题为深色模式时，应用程序将默认处于深色模式，反之亦然，为浅色模式，但我无法理解幕后发生的事情以及如何在运行时切换主题。

我没有尝试任何事情，因为我无法理解幕后发生的事情，所以我可以针对这种情况实施一种方法，谢谢。

Answer 1

转到variables.scss文件并复制深色主题的css并粘贴到一个类中，我选择“深色主题”，然后我定义了此服务来处理切换

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  private renderer: Renderer2;
  private darkThemeClass = 'dark-theme';

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  setInitialTheme() {
    const savedThemePreference = localStorage.getItem('isDarkMode');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (savedThemePreference !== null) {
      this.toggleTheme(savedThemePreference === 'true');
    } else {
      this.toggleTheme(prefersDark);
    }
  }

  toggleTheme(isDarkMode: boolean) {
    if (isDarkMode) {
      this.renderer.addClass(document.body, this.darkThemeClass);
    } else {
      this.renderer.removeClass(document.body, this.darkThemeClass);
    }
    localStorage.setItem('isDarkMode', isDarkMode.toString());
  }
}