我目前正在学习如何使用文档创建自己的Angular Material 2主题(
https://github.com/angular/material2/blob/master/guides/theming.md)
似乎主要是在这里指定颜色
// Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette,you can optionally specify a default,lighter,and darker // hue. $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink,A200,A100,A400);
我不太清楚mat-palette的作用.我理解第一个指定颜色的参数 – 我不明白为什么有一个默认的,更浅和更暗的颜色.
<md-toolbar color="primary"> text </md-toolbar>
在这种情况下,工具栏应为原色.我看不到任何指示我可以使它变暗或变亮的地方.那么用于什么的默认,更亮和更暗的颜色？
解决方法
看看_theming.scss你有mat-palette定义：
// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms // of the Material Design hues. // @param $color-map // @param $primary // @param $lighter @function mat-palette($base-palette,$default: 500,$lighter: 100,$darker: 700)
使用https://material.io/tools/color获取颜色名称和参数值.
$my-app-theme: mat-light-theme($my-app-primary,$my-app-accent,$my-app-warn); @include angular-material-theme($my-app-theme);
将mat-light-theme更改为mat-dark-theme,您的主题将使用调色板中较暗的值.
