Angular Material主题

如果要自定义主题的话，style.scss中引入的material的内建主题样式就不需要了，下面一行代码就从style.scss中移除掉

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; //这段是引入material的核心主题

新建一个文件专门自定义主题

theme.scss

建立主题的时候首先把angular material的主题支持导入进来

@import '~@angular/material/theming';

然后将material中最基础的，最共用的material风格包含进来

@include mat-core();

接下来就自定义我们自己的主题了,自己定义调色板的几个值

//首先把angular material的主题支持导入进来@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);}