我正在尝试在两个自定义主题之间切换。但是，只有我页面上的某些项目可以切换切换点击。如何使其他元素也切换，例如边框，文本和悬停颜色？
Index.html
<body class="DefaultTheme">
<app-root></app-root>
</body>
app.component.html
<div>
<mat-slide-toggle name="toggle" (click)="changeTheme()">Change theme</mat-slide-toggle>
</div>
app.component.ts
export class AppComponent{
changeTheme() {
if (document.body.classList.contains("DefaultTheme")) {
document.body.classList.remove("DefaultTheme");
document.body.classList.add("CustomTheme");
}
else {
document.body.classList.remove("CustomTheme");
document.body.classList.add("DefaultTheme");
}
}
}
theme.scss
@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mtb-pallete, 500);
$app-accent: mat-palette($mtb-pallete, 550);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary,$app-accent,$app-warn);
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
.DefaultTheme {
@include angular-material-theme($app-theme);
}
$alt-primary: mat-palette($mtb-pallete, 590);
$alt-accent: mat-palette($mtb-pallete, 580);
$alt-warn: mat-palette($mat-red);
$alt-theme: mat-light-theme($alt-primary, $alt-accent, $alt-warn);
$primary: mat-color($alt-primary);
$accent: mat-color($alt-accent);
.CustomTheme {
@include angular-material-theme($alt-theme);
}
P.S这更多是一个建议。我使用一种简单的方法，可能会对您有帮助。我将编写两个单独的样式，并嵌套一个单独的父类名称。然后我将根据条件更改父类的名称，最终将对整个页面应用不同的样式。
例如：
HTML文件：
<div [ngClass]="(theme)?'pink-theme':'yellow-theme'">
<h1 class="title">Hello World</h1>
<p class="body">This is a demo</p>
</div>
样式：
.pink-theme {
h1, p{
background: pink;
color: red;
}
.yellow-theme {
h1, p{
background: yellow;
color: red;
}
这里theme为真时，将应用粉红色主题，而当错误时，将应用黄色主题。这是样式转换的最简单方法。 Here is a working demo
代替在组件文件中添加和删除类，您可以使用[ngClass]