如何将调色板从 www.materialpalette.com 映射到 Angular 2 主题？

Question

下载 link 否则很好 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

正在寻找有关如何将这些映射到 Angular2:

的建议

$app-primary: mat-palette(…);
$app-accent: mat-palette(…);
$app-warn: mat-palette(…);

Answer 1

使用 http://mcg.mbitson.com/#!/ to generate a palette based on the colors provided by 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'; 就完成了。
另请查看 docs 了解有关如何为您的应用设置主题的更多信息

更新： 找出自定义主题的颜色可能有点棘手。目前要构建 material2 主题，您只需要提供 3 种颜色 $primary、$accent 和 $warn 根据 Theming Guide:

A primary palette：在所有屏幕和应用程序中使用最广泛的颜色组件。
An accent palette: 用于浮动动作的颜色按钮和交互元素。
A warn palette: 颜色用于传达错误状态。

如何将调色板从 www.materialpalette.com 映射到 Angular 2 主题？

How do I map a palette from www.materialpalette.com to an Angular 2 theme?

angular-material2

angular