所以我有一个Angular 2 Material应用程序。
而我想要做的只是通过点击简单button
来切换/切换主题从黑暗到光明。
我该怎么做?
答案 0 :(得分:8)
在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);
}