0

我正在尝试在两个自定义主题之间切换。但是，我的页面上只有一些项目打开了切换点击。如何使其他元素也切换，例如边框、文本和悬停颜色？

索引.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");
    }
  }
}

主题.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);
  }
4

1 回答 1

0

PS这更像是一个建议。我使用一种简单的方法，可能对您的情况有所帮助。我将编写两个独立的样式，它们嵌套在一个单独的父类名称中。我将根据条件更改父类名称，最终将不同的样式应用于整个页面。

例如：

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为真时应用粉色主题，当为假时，应用黄色主题。这是最简单的风格切换方式。这是一个工作演示

更新1：

无需在组件文件中添加和删除类，您可以使用[ngClass]

于 2019-10-28T16:35:18.243 回答