如何将自定义调色板添加到 Angular M3 主题？

Question

我可以创建一个例如具有自定义颜色的自定义主调色板。 我可以添加其他调色板，例如带有“自定义”名称的“主”调色板以及其他自定义颜色和名称吗？

我想为主题添加颜色“导航背景”。它适用于 M2，但适用于 M3？

$light-theme: mat.define-theme(
    (
        color: (
            theme-type: light,
            primary: $_primary,
            tertiary: $_tertiary,
        ),
        typography: (
            brand-family: 'Roboto',
            bold-weight: 900,
        ),
    )
);

Answer 1

尝试设置自定义辅助主题和应用此额外颜色的根类。您还可以创建自定义主题以完全控制辅助主题调色板

$extra-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$green-palette,
    tertiary: mat.$green-palette,
  )
));


.mat-custom-color {
  @include mat.button-color($extra-theme, $color-variant: primary);
}

HTML：

<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button class="mat-custom-color">Basic</button>
    <button mat-raised-button class="mat-custom-color">Basic</button>
    <button mat-raised-button class="mat-custom-color">Basic</button>
    <button mat-raised-button class="mat-custom-color">Basic</button>
  </div>
</section>

带有工作示例的参考答案

---

最好的解决方案是将颜色保留在调色板中，因为它可以避免硬编码。

ng generate @angular/material:m3-theme

然后在多个调色板中找到插入自定义颜色的方法。

// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

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

// Note: Color palettes are generated from primary: #eeeeee, secondary: #fefefe, tertiary: #000000, neutral: #ffffff
$_palettes: (
  primary: (
    0: #000000,
    10: #001f24,
    20: #00363d,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    90: #97f0ff,
    95: #d0f8ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #001f24,
    20: #00363d,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    90: #97f0ff,
    95: #d0f8ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #3e001d,
    20: #5e1133,
    25: #6c1d3e,
    30: #7b2949,
    35: #893455,
    40: #984061,
    50: #b6587a,
    60: #d57193,
    70: #f48bae,
    80: #ffb1c8,
    90: #ffd9e2,
    95: #ffecf0,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #000c0e,
    6: #001316,
    10: #001f24,
    12: #002429,
    17: #002f35,
    20: #00363d,
    22: #003b42,
    24: #004047,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    87: #81e9f9,
    90: #97f0ff,
    92: #aef3ff,
    94: #c5f6ff,
    95: #d0f8ff,
    96: #daf9ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #141d1f,
    20: #293234,
    25: #343d3f,
    30: #3f484a,
    35: #4b5456,
    40: #576062,
    50: #6f797a,
    60: #899294,
    70: #a3adaf,
    80: #bfc8ca,
    90: #dbe4e6,
    95: #e9f2f4,
    98: #f2fbfd,
    99: #f6feff,
    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,
  ),
);

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

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