Material使用06 自定义主题、黑夜模式\白天模式切换

需求：

　　1 不使用materil依赖内建的主题，使用自己创建的主题

　　2 利用自己创建的主题实现白天模式和黑夜模式

1 自定义主题

　　1.1 创建自定义主题文件 them.scss

　　　　 $Material使用06 自定义主题、黑夜模式\白天模式切换$

// 引入material自定义主题支持
@import '~@angular/material/theming';
// 引入material公用的主题风格
@include mat-core();

// 自定义颜色
$my-app-primary: mat-palette($mat-blue);
$my-app-accent: mat-palette($mat-teal, 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);

View Code