角材料-全局颜色变量

他们查看Angular Material文档时，建议使用-theme每个组件一个文件来管理将与主题相关的样式应用于特定类。

在我看来，这种方法的一些缺点是：

很冗长

将样式分为两个不同的位置

您所有的前端开发人员都需要了解Angular Material颜色如何工作

使得更改值变得更加困难（例如，我们可能一直在使用mat-color($primary, 200)边框颜色，现在想将其更改为mat-color($primary, 300)。这将在整个代码库中重复进行。

给定一致的设计语言，将仅使用一部分颜色（例如，主调色板中的4种颜色，重点调色板中的3种颜色，一些不同的前景色/背景色等）。

鉴于以上所述，_colors.scss使用主题定义确切的颜色，而不是希望开发人员每次都从主题中提取正确的值，不是更有意义吗？

例如，也许像这样：

  $clr-primary-default: mat-color($primary);
  $clr-primary-contrast: mat-color($primary, default-contrast);
  $clr-primary-light: mat-color($primary, lighter);
  $clr-primary-dark: mat-color($primary, darker);

  $clr-accent-default: mat-color($accent);
  $clr-accent-light: mat-color($accent, lighter);
  $clr-accent-dark: mat-color($accent, darker);

  $clr-default-text: mat-color($foreground);
  $clr-secondary-text: mat-color($foreground, secondary-text);

  //etc

然后-theme，我无需为需要特定颜色的每个组件创建单独的文件，而是可以简单地导入colors.scss文件并直接在*.component.scss文件中使用变量。

只是想验证上面的内容是否正确，并且我没有错过任何明显的会引起麻烦的东西？

另一个棘手的部分是如何colors有效地在单独的文件中定义它们，因为该文件需要访问主题数据。

只是想验证上面的内容是否正确，并且我没有错过任何明显的会引起麻烦的东西？

我能想到的唯一一件事是，您将错过在一个应用程序中使用多个主题的机会。使用Angular Material文档中的方法，您将对@mixin每个组件都有一个，可以@include使用不同的$theme变量多次。

来自https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1的示例：

.default-theme {
  @include angular-material-theme($theme);
  @include custom-component-theme($theme);
}

.light-theme {
  @include angular-material-theme($light-theme);
  @include custom-component-theme($light-theme);
}

@import '~@angular/material/theming';
// Theme configuration
$primary: mat-palette($mat-blue, 800, 500, 900);
$accent:  mat-palette($mat-blue, A200, A100, A400);
$warn: mat-palette($mat-red);

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

// Custom colors
$custom-colors: (
  custom-color-a: mat-color($mat-green, 700),
  custom-color-b: mat-color($mat-red, 400),
);
$theme: map-merge($theme, (custom-colors: $custom-colors));

@import '~@angular/material/theming';
// Theme configuration
$primary: mat-palette($mat-blue, 800, 500, 900);
$accent:  mat-palette($mat-blue, A200, A100, A400);
$warn: mat-palette($mat-red);

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

// Custom colors
$custom-colors: (
  custom-color-a: mat-color($mat-green, 700),
  custom-color-b: mat-color($mat-red, 400),
);
$theme: map-merge($theme, (custom-colors: $custom-colors));

"styles": [
  "src/styles.scss",
  "src/theme.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},

@import 'variables';

.custom-class-a {
  background-color: map-get($custom-colors, custom-color-a);
  color: map-get($custom-colors, custom-color-b);
}