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

下载链接，否则优秀的不支持角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(…);

用于根据提供的颜色生成调色板，以便最终获得包含颜色的文件，例如

/assets/your palete.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,
    )
);

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

然后根据上面的文件，您必须创建一个主题，例如

/assets/theme.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,
    )
);

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

然后导入你的主题

@import'/assets/theme'styles.scss

中进行code>操作，您就完成了。
另外，请查看以获取有关如何设置应用程序主题的更多信息

更新： 要确定自定义主题的颜色可能有点棘手。目前，要构建

material2

主题，您只需提供3种颜色

$primary

，

$accent

和

$warn

，如下所示：

• A

  主调色板

  ：在所有屏幕和屏幕上最广泛使用的颜色 组成部分

• 强调调色板

  ：用于浮动操作的颜色 按钮和交互元素
• A

  警告调色板

  ：用于 传递错误状态

---

Hi@Kuncevic请确认，materialpalette.com中的以下项目不适用于A2 MD：（$primary color dark、$primary color light、$primary color text、$primary text color、$secondary text color和$divider color），是否正确？还不清楚$app-warn应该使用哪种颜色。您只需选择基本颜色来生成pallatte。您始终可以调整，直到您对结果满意为止。您也可以手动更改生成的文件<代码>警告调色板：用于传达错误状态的颜色（请参阅答案更新）

materialpalette.com

只是一个通用的材质颜色生成器，因此在

material2

自定义主题的情况下，您只需提供3种颜色

$primary

，

$accent

和

$warn

仍然适用于Angular 7和Angular material 7