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);
}