Angular Material - 全局颜色变量

Question

查看 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 文件中有效地定义这些文件，因为该文件需要访问主题数据。

原文由 NRaf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 styles.css 文件中将主要颜色、重音颜色和警告颜色定义为 CSS 自定义变量，如下所示：

 @import "~@angular/material/theming";
@include mat-core();

$my-primary: mat-palette($mat-blue-grey);
$my-accent: mat-palette($mat-amber, A200, A100, A400);
$my-warn: mat-palette($mat-deep-orange);

$my-2-primary: mat-palette($mat-pink, 400, 200, 600);
$my-2-accent: mat-palette($mat-blue, A200, A100, A400);
$my-2-warn: mat-palette($mat-deep-orange, 500, 300, 700);

.dark-theme {
  $my-theme-dark: mat-dark-theme($my-primary, $my-accent, $my-warn);
  @include angular-material-theme($my-theme-dark);
  $primary: mat-color($my-primary);
  $accent: mat-color($my-accent);
  $warn: mat-color($my-warn);
  $fg_palette:map-get($my-theme-dark, foreground);
  $bg_palette:map-get($my-theme-dark, background);
  $fg:map-get($fg_palette, text);
  $bg:map-get($bg_palette, background);

  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};
  --fg: #{$fg};
  --bg: #{$bg};
}

.dark-theme-2 {
  $my-2-theme-dark: mat-dark-theme($my-2-primary, $my-2-accent, $my-2-warn);
  @include angular-material-theme($my-2-theme-dark);
  $primary: mat-color($my-2-primary);
  $accent: mat-color($my-2-accent);
  $warn: mat-color($my-2-warn);
  $fg_palette:map-get($my-2-theme-dark, foreground);
  $bg_palette:map-get($my-2-theme-dark, background);
  $fg:map-get($fg_palette, text);
  $bg:map-get($bg_palette, background);

  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};
  --fg: #{$fg};
  --bg: #{$bg};
}

并在我的任何组件中使用这些变量，如下所示：（在 my-custom-component.scss 中）

 .some-class {
    color: var(--primary)
}

.another-class {
    background-color: var(--bg)
}

.yet-another-class {
    border-color: var(--accent)
}

通过这样做，我可以更改任何组件中与颜色相关的任何值，因为这些变量是全局的（在 styles.css 中定义）当我更改主题时，这些颜色也会根据新主题的颜色而更改

原文由 levent güney 发布，翻译遵循 CC BY-SA 4.0 许可协议