angular material 主题样式 (白天/黑夜)

创建文件theme.scss

@import "~@angular/material/theming";
@include mat-core();
$my-app-primary:mat-palette($mat-indigo);
$my-app-accent :mat-palette($mat-pink,A200,A100,A400);
$my-app-warn :mat-palette($mat-red);
$my-app-theme :mat-light-theme($my-app-primary,$my-app-accent,$my-app-warn);
@include angular-material-theme($my-app-theme);

$my-dark-primary:mat-palette($mat-blue-grey);
$my-dark-accent :mat-palette($mat-amber,A200,A100,A400);
$my-dark-warn :mat-palette($mat-deep-orange);
$my-dark-theme :mat-dark-theme($my-dark-primary,$my-dark-accent,$my-dark-warn);

.myapp-dark-theme{
@include angular-material-theme($my-dark-theme);
}

在 styleles.scss 中引用 theme.scss
@import 'theme.scss';

我们在header.component.html 中 toggle添加属性
<md-slide-toggle (change)="onChange($event.checked)" >黑夜模式</md-slide-toggle>

image.png

在包含子组件header的父组件中设置设置输出属性

image.png

switchTheme方法如下所示：

darktheme = false;
switchTheme(dark){
this.darktheme=dark;
this.oc.themeClass= dark ? 'myapp-dark-theme' :null;
}

通过上面的步骤就可以完成主题样式的切换 。