Question

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

用于“黑暗模式”的拨动开关
此切换开关将切换布尔值“ dark-ui”真/假
当应用程序组件将dark-ui读取为true时，应在父级元素之一（例如app-main）上设置“ dark”类。如果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的更多详细信息

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

1 个答案: