如何在 node_modules 主题文件之外使用自定义材质颜色？答案

【问题标题】：How can I use custom material colors outside the node_modules theme file?如何在 node_modules 主题文件之外使用自定义材质颜色？
【发布时间】：2019-04-16 20:24:45
【问题描述】：

我添加了一个自定义材质主题，其中包含我在 node_modules/angular/material/_theming.scss 中定义的新主/强调/警告颜色。我可以在其他地方声明我的新颜色，以便我可以在 Github 上为我的同事推送主题吗？

主要问题是在颜色变量成为 node_modules 文件的一部分之前，循环 CI 测试不会通过。

这是我的 theme.scss 文件

@import '~@angular/material/theming';

$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);

$blockframes-theme: mat-light-theme(
  $blockframes-theme-primary,
  $blockframes-theme-accent,
  $blockframes-theme-warn
);

theme.scss 像这样导入到我的全局 style.scss 中

@import "theme.scss";
@include mat-core();
@include angular-material-theme($blockframes-theme);
@import '~@angular/material/theming';

...

我的自定义颜色在 _theming.scss 中以这种方式声明

$mat-bf-purple: (
  50: #ece0fd,
  100: #d0b3fa,
  200: #b080f6,
  300: #904df2,
  400: #7926f0,
  500: #6100ed,
  600: #5900eb,
  700: #4f00e8,
  800: #4500e5,
  900: #3300e0,
  A100: #ffffff,
  A200: #dbd4ff,
  A400: #b1a1ff,
  A700: #9b88ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$mat-bf-crimson: (
  50: #fde8eb,
  100: #fbc5ce,
  200: #f99eae,
  300: #f6778d,
  400: #f45974,
  500: #f23c5c,
  600: #f03654,
  700: #ee2e4a,
  800: #ec2741,
  900: #e81a30,
  A100: #ffffff,
  A200: #ffe8ea,
  A400: #ffb5bc,
  A700: #ff9ca4,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

提前感谢您的帮助和建议。

【问题讨论】：

标签： angular colors angular-material themes scss-mixins

【解决方案1】：

好吧，我有一个非常简单的解决方案来解决我自己的问题，只需在 theme.scss 文件的开头声明新颜色，它就可以完成这项工作。

@import '~@angular/material/theming';

$mat-bf-purple: (
  50: #ece0fd,
  100: #d0b3fa,
  200: #b080f6,
  300: #904df2,
  400: #7926f0,
  500: #6100ed,
  600: #5900eb,
  700: #4f00e8,
  800: #4500e5,
  900: #3300e0,
  A100: #ffffff,
  A200: #dbd4ff,
  A400: #b1a1ff,
  A700: #9b88ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$mat-bf-crimson: (
  50: #fde8eb,
  100: #fbc5ce,
  200: #f99eae,
  300: #f6778d,
  400: #f45974,
  500: #f23c5c,
  600: #f03654,
  700: #ee2e4a,
  800: #ec2741,
  900: #e81a30,
  A100: #ffffff,
  A200: #ffe8ea,
  A400: #ffb5bc,
  A700: #ff9ca4,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);

$blockframes-theme: mat-light-theme(
  $blockframes-theme-primary,
  $blockframes-theme-accent,
  $blockframes-theme-warn
);

【讨论】：