Angular Material 2. 单击将主题从浅色切换为深色
Angular Material 2. Switch theme from light to dark on click
所以我有一个 Angular 2 Material 应用程序。
我想做的只是 switch/toggle 通过点击简单的 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 2 Material 应用程序。
我想做的只是 switch/toggle 通过点击简单的 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);
}