Angular Material 2.单击将主题从浅色切换为深色 [英] Angular Material 2. Switch theme from light to dark on click

问题描述

所以我有一个Angular 2 Material应用程序. 我只想通过单击简单的button即可将主题从黑暗切换为明亮.

So I have an Angular 2 Material application. And all I wanna do is just switch/toggle theme from dark to light by clicking simple button.

我该怎么办?

推荐答案

在您的menu中:

app.component.html :

<div [class.dark-theme]="isDarkTheme">
    <!--Your application content here-->
    <md-menu #more="mdMenu">
        <!--Your content here-->
        <button md-menu-item (click)="changeTheme()">
            Change Theme
        </button>
    </md-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;
        }
     }
}

theme.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);

}

这篇关于Angular Material 2.单击将主题从浅色切换为深色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！