Angular Material 2. 单击时将主题从浅色切换为深色

Question

所以我有一个 Angular 2 Material 应用程序。 我想做的只是通过单击简单的

button

将主题从暗切换/切换为亮。

我该怎么做？

Answer 1

您可以使用 类绑定语法 有条件地将 CSS 类应用到文档。然后，这个 CSS 类可以保存应用程序的深色主题的样式信息。

在你的

menu

：

app.component.html:

<div [class.dark-theme]="isDarkTheme">
    <!--Your application content here-->
    <mat-menu #more="mdMenu">
        <!--Your content here-->
        <button mat-menu-item (click)="changeTheme()">
            Change Theme
        </button>
    </mat-menu>
</div>

app.component.ts：

// import statements here
import {Component} from '@angular/core';

export class AppComponent {
    // Initialize isDarkTheme to false
    isDarkTheme: boolean = false;
    // Your code here
    
    changeTheme(): void {
        if (this.isDarkTheme) {
           this.isDarkTheme = false;
        } else {
           this.isDarkTheme = true;
        }
     }
}

然后，您可以让类在 SCSS 配置中指定深色主题变体：

主题.scss：

@import '~@angular/material/core/theming/_all-theme';

@include mat-core();
.dark-theme {
    // Dark theme
    $app-dark-primary: mat-palette($mat-pink, 700);
    $app-dark-accent: mat-palette($mat-blue-grey);
    $app-dark-theme: mat-dark-theme($app-dark-primary, $app-dark-accent);

    @include angular-material-theme($app-dark-theme);
}