有角材料 18 - 颜色问题

Question

我生成（ng生成@ angular/material：my--own-theme）在own-theme.scss中有这样的代码

不知何故，它适用于包含在角度材料中的调色板。但我想使用我自己的主题。所以下面你可以看到生成了什么代码以及我做了什么：

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #2397e6, secondary: #00639a, tertiary: #006c51, neutral: #9dcaff
$_palettes: (
  primary: (
    0: #000000,
    10: #001d33,
    20: #003354,
    25: #003e65,
    30: #004a77,
    35: #005689,
    40: #00639c,
    50: #007cc3,
    60: #2397e6,
    70: #53b2ff,
    80: #97cbff,
    90: #cee5ff,
    95: #e8f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #001d32,
    20: #003353,
    25: #003f64,
    30: #004a75,
    35: #005787,
    40: #00639a,
    50: #207cbb,
    60: #4597d6,
    70: #63b1f3,
    80: #96ccff,
    90: #cee5ff,
    95: #e8f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #002116,
    20: #003829,
    25: #004432,
    30: #00513c,
    35: #005e46,
    40: #006c51,
    50: #008766,
    60: #21a37e,
    70: #47bf97,
    80: #66dbb2,
    90: #83f8cd,
    95: #bbffe2,
    98: #e7fff2,
    99: #f4fff7,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #000c15,
    6: #001120,
    10: #001d35,
    12: #00213c,
    17: #002c4d,
    20: #003257,
    22: #00365e,
    24: #003b65,
    25: #003d69,
    30: #00497c,
    35: #00558f,
    40: #0061a2,
    50: #307bbe,
    60: #4f95d9,
    70: #6cb0f6,
    80: #9dcaff,
    87: #c1dcff,
    90: #d1e4ff,
    92: #dbe9ff,
    94: #e4eeff,
    95: #e9f1ff,
    96: #eef4ff,
    98: #f8f9ff,
    99: #fdfcff,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #171c22,
    20: #2c3137,
    25: #373c42,
    30: #42474e,
    35: #4e535a,
    40: #5a5f66,
    50: #72777f,
    60: #8c9199,
    70: #a7abb3,
    80: #c2c7cf,
    90: #dee3eb,
    95: #ecf1f9,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
  accent: (
    0: #000000,
    10: #001d33,
    20: #003354,
    25: #003e65,
    30: #004a77,
    35: #005689,
    40: #00639c,
    50: #007cc3,
    60: #2397e6,
    70: #53b2ff,
    80: #97cbff,
    90: #cee5ff,
    95: #e8f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
),
);

$_rest: (
  secondary: map.get($_palettes, primary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);

$_rest2: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);

$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest2);

$_primary: mat.$orange-palette;

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary
  ),
));

和 HTML

  <div class="demo-buttons custom-theme">
    <h2>Custom Theme</h2>
    <button mat-raised-button color="primary">Raised</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="tertiary">tertiary</button>
    <button mat-raised-button color="warn">Warn</button>
  </div>

重点是：

1. 主要和第三级具有相同的颜色（我想不是来自我自己的主题） - 为什么以及如何更改它？
2. 如何更改例如。那个按钮的背景？
3. 如何更改“强调”颜色？

预先感谢您的任何回复。

Answer 1

如本 github 问题中所述：

M3 不再使用颜色输入。相反，您可以为不同的变体创建自己的主题。有关这方面的更多信息，请参阅material.angular.io/guide/theming#using-component-color-variants

指向材料18文档：

虽然您应该更喜欢显式应用具有颜色变体的 mixins，但如果从 M2 迁移到 M3，您也可以使用提供的向后兼容性 mixins，将样式直接应用于现有 CSS 类（mat-primary、mat-accent 和 mat-warn） ).

所以我对你问题的回答是：

颜色输入主要来自不使用第三色的 M2，因此启用带有

@include mat.color-variants-backwards-compatibility(my-custom-theme.$light-theme);

“第三色”的功能作为变体将变得不可用。

您可以将其添加到全局 style.scss 中

.tertiary-button{
  @include mat.checkbox-button(my-custom-theme.$light-theme, $color-variant: tertiary);
}

并将其应用到您的模板中，如下所示

<button mat-raised-button class="tertiary-color">Tertiary</button>

但是你会发现颜色变得与强调色相同，这是因为显然M3在传统模式下使用第三色作为强调色。所以您可能想定义辅助颜色。

要自定义背景颜色，您可以用自己的背景覆盖默认背景，例如

.tertiary-button{
  @include mat.checkbox-button(my-custom-theme.$light-theme, $color-variant: tertiary);
  background-color: red !important;
}