角度材质2.单击时将主题从亮到暗切换

发布时间：2020-12-17 17:22:54 所属栏目：安全来源：网络整理

导读：所以我有一个Angular 2 Material应用程序. 而我想做的只是通过点击简单的按钮切换/切换主题从黑暗到光明. 我该怎么做？解决方法在您的菜单中： app.component.html： div [class.dark-theme]="isDarkTheme" !--Your application content here-- md-menu #

所以我有一个Angular 2 Material应用程序.
而我想做的只是通过点击简单的按钮切换/切换主题从黑暗到光明.

我该怎么做？

解决方法

在您的菜单中：

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

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!