如何在角度 4 中使用条件设置整个应用程序样式

Question

我想要一个按钮来将整个应用程序设置为暗模式。

1. “黑暗模式”的切换开关
2. 此切换开关将切换布尔值“dark-ui”真/假
3. 当应用程序组件将dark-ui 读取为true 时，应在父级元素之一上设置“dark”类，例如app-main。当 dark-ui 为 false 时，应删除此类。

所以我在页脚组件中有这个切换。我尝试使用 [ngClass]，但这不是我想要的。

在 html 文件中切换

<button *ngIf="isDarkMode==false" md-button (click)="turnOnDarkMode()">Dark Mode Off</button>

<button *ngIf="isDarkMode!=false" md-button (click)="turnOffDarkMode()">Dark Mode On</button>

ts 文件

turnOnDarkMode() {

}

turnOffDarkMode() {

}

这两个函数应该怎么做，或者有没有其他的办法？

谢谢。

Answer 1

最好的方法是使用 [class.setDarkMode]="darkMode" 或 [ngClass]="darkMode" 然后在你的 ts 文件中

turnOnDarkMode() {
  this.darkMode=true;
}

turnOffDarkMode() {
  this.darkMode=true;
}

最好使用ngClass 属性，因为它具有更丰富的功能，请访问此link 以检查用例。

并让 css 运行以打开暗模式

root: {
  --text-color: DarkBlue;
  --back-color: Azure;
}
body { color: var(--text-color); background: var(--back-color)}
@media (prefers-dark-interface) {
  root: {
   --text-color: Azure;
   --back-color: DarkBlue;
  } 
}

参考link 了解有关 css 的更多详细信息