如何在最新的角材料上添加扩展颜色19主题

Question

我使用

ng generate @angular/material:m3-theme

生成主题颜色并将其应用于

style.scss

，但是当我这样做时

风格。Scss

@use '@angular/material' as mat;
@use './_theme-colors.scss' as theme-colors;

html {
  color-scheme: light;
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$primary-palette,
        tertiary: theme-colors.$tertiary-palette,
        info: theme-colors.$info-palette,
        success: theme-colors.$success-palette,
        warning: theme-colors.$warning-palette,
      ),
      typography: Roboto,
      density: 0,
      high-contrast: high-contrast-overrides(light),
    )
  );
}

我有一个错误说

$config has unexpected properties. Valid properties are theme-type, primary, tertiary, use-system-variables, system-variables-prefix. Found: (info success warning)

。所以我不能添加新属性。

在最新的

angular material 19

？

中添加新的扩展颜色调色板的正确方法是什么

i首先通过修改自动生成主题来通过

Answer 1

添加调色板以获取信息，成功和警告来解决此问题。

自动生成了

$_palettes

和

$_rest

，您只需要将调色板添加到

$_palettes

。

然后您只添加出口

$info-palette, $success-palette, $warning-pallete

或任何您喜欢的名字。

$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
$info-palette: map.merge(map.get($_palettes, info), $_rest);
$success-palette: map.merge(map.get($_palettes, success), $_rest);
$warning-palette: map.merge(map.get($_palettes, warning), $_rest);

在您的主题上

html {
  color-scheme: light;
  @include mat.theme(
    (
      color: (
        /* these is the only property for setting the color palette for angular material 19 */
        primary: theme-colors.$primary-palette,
        tertiary: theme-colors.$tertiary-palette,
      ),
      typography: Roboto,
      density: 0,
      high-contrast: high-contrast-overrides(light),
    )
  );
}

这是针对黑暗模式

.dark {
  color-scheme: dark;
  @include mat.theme(
    (
      high-contrast: high-contrast-overrides(dark),
    )
  );
}

实际上，对于黑暗模式，您只需要设置

color-scheme: dark

才能使其工作。我只是包括高对比度。

然后应用信息，成功和警告调色板，只需创建类以覆盖主要主题托盘即可。

这个示例给我按钮，并提供相应的信息，成功和警告。

.info {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$info-palette,
      ),
    )
  );

  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-primary),
      filled-label-text-color: var(--mat-sys-on-primary),
      outlined-outline-color: var(--mat-sys-primary),
      outlined-label-text-color: var(--mat-sys-primary-on),
      protected-container-color: var(--mat-sys-primary-container),
      protected-label-text-color: var(--mat-sys-primary-on-container),
    )
  );
}

.success {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$success-palette,
      ),
    )
  );

  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-primary),
      filled-label-text-color: var(--mat-sys-on-primary),
      outlined-outline-color: var(--mat-sys-primary),
      outlined-label-text-color: var(--mat-sys-primary-on),
      protected-container-color: var(--mat-sys-primary-container),
      protected-label-text-color: var(--mat-sys-primary-on-container),
    )
  );
}

.warning {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$warning-palette,
      ),
    )
  );

  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-primary),
      filled-label-text-color: var(--mat-sys-on-primary),
      outlined-outline-color: var(--mat-sys-primary),
      outlined-label-text-color: var(--mat-sys-primary-on),
      protected-container-color: var(--mat-sys-primary-container),
      protected-label-text-color: var(--mat-sys-primary-on-container),
    )
  );
}

然后您可以像这样使用它。

<button mat-raised-button class="info">Info Button</button>
<button mat-raised-button class="success">Success Button</button>
<button mat-raised-button class="warning">Warning Button</button>