Angular 有棱角的黑暗主题

你好，我做了一个切换按钮，将我的爱奥尼亚3应用程序更改为黑暗模式。但是我不知道在哪里定义全局类

[class.dark theme]=“dark”

。必须在app.component.ts上才能在整个应用中进行更改。这就是我到目前为止所做的：

any-page.html

<ion-item>
    <ion-label>
      Dark Mode
    </ion-label>
    <ion-toggle [(ngModel)]="dark"></ion-toggle>
  </ion-item>

app.component.ts

export class MyApp {
  dark=false;
}

---

我应该如何定义

NgModel=“dark”

（[class.dark theme]=“dark”）

我也实现了一个黑暗主题，但它具有角度，而不是离子。其目的是在body元素中添加一个

dark

类。 我与您共享我的代码：）

首先，创建组件暗模式。组件：

从'@angular/common'导入{DOCUMENT}；
导出类DarkModeComponent实现OnInit{
私有类='dark'；
专用存储='darkMode'；
@输入（）
获取值（）：布尔值{
返回this.document.body.classList.contains（this.class）；
}
设置值（isDark:布尔值）{
setItem（this.storage，isDark.toString（））；
if（isDark）{
this.document.body.classList.add（this.class）；
}否则{
this.document.body.classList.remove（this.class）；
}
}
构造函数（@Inject（DOCUMENT）private-DOCUMENT:DOCUMENT）{}
恩戈尼尼特（）{
const value=localStorage.getItem（this.storage）；
如果（值）{
this.value=JSON.parse（value）；
}
}
}

我使用本地存储来保留用户的选择。 下面是HTML（非常复杂）：

切换主题

我已在app.module.ts中导入此组件：

@NgModule({
声明：[
应用组件，
...
暗模式分量
],
进口：[
浏览器模块，
批准模块，
BrowserAnimationsModule，
材料模块，
...
],
提供者：[……]，
引导：[AppComponent]，
})
导出类AppModule{}

然后您只需在HTML模板中调用您的组件，我将其放入一个menu.component.HTML：

---

我希望这会有帮助。

谢谢埃米利恩。难道不应该有一种更简单的方法来定义一个类吗？为整个应用程序添加它？由DarkModeComponent中的setter来完成。你试过了吗？这个.document.body.classList.add（'dark'）是的，它可以工作！但我想通过在app.component文件中添加一个全局类（暗主题）来实现这一点，当ngModel中的暗主题为true时，该类将被触发。我做这件事的方式很有效。但我不知道如何让这个类应用于整个应用程序和一个页面。例如，如果我把这样的类放在一个页面中，它会起作用。。。。。对不起，如果你没有把我的问题说清楚，你可以把任何页面都放进去？@Simonia我在你的帖子里没有看到你在哪里显示CSS类。我给你一个答案，这将使你有可能管理你的主题与一个全球性的CSS类的身体标签。我不明白你还需要什么。

export class MyApp {
  dark=false;
}