要在Angular Material中实现主题切换,您可以按照以下步骤进行操作:
MatIconModule和MatButtonModule模块:import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatIconModule,
MatButtonModule
],
...
})
export class AppModule { }
import { Component } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
darkTheme = false;
toggleTheme(): void {
this.darkTheme = !this.darkTheme;
}
}
[ngClass]指令来根据主题状态动态应用不同的CSS类:
.light-theme {
background-color: #ffffff;
color: #000000;
}
.dark-theme {
background-color: #000000;
color: #ffffff;
}
通过执行上述步骤,您应该能够在Angular Material应用中实现主题切换。