在其他优秀的 www.materialpalette.com 上下载链接不支持Angular 2。下载例如 sass 给出:
$primary-color-dark
$primary-color
$primary-color-light
$primary-color-text
$accent-color
$primary-text-color
$secondary-text-color
$divider-color
寻找有关如何将这些映射到 Angular 2 的建议:
$app-primary: mat-palette(…);
$app-accent: mat-palette(…);
$app-warn: mat-palette(…);
使用 http://mcg.mbitson.com/#!/根据 materialpalette 提供的颜色生成调色板,因此最终您可以获得包含您的颜色的文件,例如 /assets/your-palette.scss
:
$mat-your-palette: (
50 : #e8eaf6,
100 : #c5cbe9,
200 : #9fa8da,
300 : #7985cb,
400 : #5c6bc0,
500 : #3f51b5,
600 : #394aae,
700 : #3140a5,
800 : #29379d,
900 : #1b278d,
A100 : #c6cbff,
A200 : #939dff,
A400 : #606eff,
A700 : #4757ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
然后根据上面的文件,您必须创建一个主题,例如/assets/theme.scss
:
@import '~@angular/material/_theming.scss';
@import './your-palette.scss';
@include mat-core();
$primary: mat-palette($mat-your-palette, 500);
$accent: mat-palette($mat-your-palette, A100);
$warn: mat-palette($mat-your-palette, A200);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
然后在styles.scss
中导入您的主题@import '/assets/theme';
,您就完成了。
另请查看文档,了解有关如何设置应用主题
更新:找出自定义主题的颜色可能有点棘手。目前要构建material2
主题,您只需要提供 3 种颜色$primary
、$accent
和$warn
根据主题指南:
primary palette
:在所有屏幕上使用最广泛的颜色和组件。accent palette
:用于浮动动作的颜色按钮和交互元素。warn palette
:用于的彩色传达错误状态。