Question

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

主要问题是，直到color变量成为node_modules文件的一部分，Circle 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这样导入到我的全局样式中。

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

在此先感谢您的帮助和建议。

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

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

1 个答案: