如何在 ionic8 Angular 18 中切换暗模式

Question

我的

global.scss

文件中有三种 CSS 样式。目前，我正在使用深色模式，但我想有条件地更改它们。我怎样才能在 Ionic 8 和 Angular 18 中做到这一点？

这是我的

global.scss

代码。

// @import "@ionic/angular/css/palettes/dark.always.css";
// @import "@ionic/angular/css/palettes/dark.class.css";
@import '@ionic/angular/css/palettes/dark.system.css';

我想在我的应用程序中添加一个切换按钮，这样我就可以根据它来设置主题。

Answer 1

要使其成为有条件的，请进行以下更改：

前往您的

theme/variable.scss

从

@media (prefers-color-scheme: dark)

媒体查询中取出所有内容并将其粘贴到外面（只需注释媒体查询打开和关闭标签）。

然后根据您的情况，您可以打开和关闭深色模式：

changeDarkMode(darkodetype: boolean){
   document.body.classList.toggle('dark', darkModetype);
}

注意：禁用暗模式媒体查询将始终显示亮模式。您必须以编程方式启用暗模式。