AngularCLI自定义主题

AngularCLI自定义主题（一）

1.自定义主题

1.创建自定义主题文件theme.scss
1.1.1 引入自定义主题支持和material公用的主题风格

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

1…1.2 根据material公用的主题设定自己的主题颜色

// 自定义颜色
$my-app-primary: mat-palette($mat-blue); 
$my-app-accent: mat-palette($mat-teal, A200, A100, A400); 
$my-app-warn: mat-palette($mat-red); 

附加：
1.my-app-primary是一个变量
2.mat-palette充当的是一个调色器的角色，mat-blue表示使用material主题风格中的blue这种颜色
3.material提供的颜色 网址：https://www.materialui.co/colors

1.1.3使用自己定义的主题颜色封装成一个自定义主题

// 利用自定义颜色组装自定义主题
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

附加：
1.mat-light-theme和mat-dark-theme是相对的，一个是亮系主题，一个是暗系主题，可以自由选择
2.mat-light-theme和mat-dark-theme的 $ my-app-primary、$ my-app-accent、$my-app-warm三个参数的位置可以随意替换，但是数量不能超过三个，依次对应primary、accent和warm三种状态，不写或在组件参数写错时，则取上一个样式。

1.1.4 设置主题颜色使其生效

// 设置自定义主题，使其生效
@include angular-material-theme($my-app-theme);

2.把style.css文件改为style.scss文件，并且引用其theme.scss文件

@import "./theme.scss";

上述代码，引用的路径为相对路径&#x