为什么导航栏不采用我尝试分配的主题

Question

我在 https://stackblitz.com/edit/etnmae-xjweyt 有一个应用程序，似乎无法编译它，更不用说为导航栏分配中性颜色了。 我可以将其从浅色模式更改为深色模式，但想要浅粉色以外的其他颜色作为背景。

这是样式，在同一个文件夹中我有我的 m3-style.scss。 我没有使用任何 Material 2 样式，严格来说是 Material 3，所以我不需要向后兼容性。

enter code here

@use 'sass:map';
@use '@angular/material' as mat;
@use 'm3-theme.scss';

$typography-config: (
  plain-family: 'Edu AU VIC WA NT Pre',
  brand-family: 'Edu AU VIC WA NT Pre',
); !

$typography-config-secondary: (
  plain-family: Roboto,
  brand-family: Open Sans,
  bold-weight: 900,
  medium-weight: 500,
  regular-weight: 300,
);

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: $typography-config,
  )
);

$theme-secondary: mat.define-theme(
  (
    color: (
      primary: mat.$violet-palette,
      tertiary: mat.$magenta-palette,
    ),
    typography: $typography-config-secondary,
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.all-component-themes($theme);
  @include mat.toolbar-theme($theme-secondary);
}

html {
  height: 100%;
}
//THIS Is what I am trying to use for the toolbar and I have a toolbar theme above that doesn't work either  
mat-toolbar {
  background-color: mat-color($neutral, 900); // Adjust the shade as needed
}

@include mat.core();
@include mat.typography-hierarchy($theme); // <- notice!

如有任何帮助，我们将不胜感激

谢谢

Answer 1

我注意到您没有使用您创建的自定义主题，因此我修改了代码以使用自定义主题。

@use "m3-theme.scss" as custom-theme;
...

...
$theme-secondary: mat.define-theme(
  (
    color: (
      primary: custom-theme.$primary-palette,
      tertiary: custom-theme.$tertiary-palette,
    ),
    typography: $typography-config-secondary,
  )
);

要配置自定义，请按照以下步骤操作，Angular Material 在版本 19 上有了新的升级，它使主题化变得简单 100 倍。

1. 首先访问文档页面，它是 mat 工具栏 - 文档，然后访问

   styling

   选项卡。

2. 在底部您会发现

   Tokens supported by toolbar-overrides

   ，其中包含用于自定义工具栏的标记。由于我们要自定义背景颜色，因此我们选择

   container-background-color

   。

3. 现在我们有了令牌名称，我们可以参考新的使用组件令牌的主题指南，然后添加

   mat.<<feature name>>-overrides(

   方法来添加自定义样式。为了获取主题颜色，我使用

   mat.get-theme-color

   并使用获得的属性配置令牌。

    mat-toolbar {
      @include mat.toolbar-overrides(
        (
          container-background-color:
            mat.get-theme-color($theme-secondary, neutral, 96),
        )
      );
    }
   

此后，您已经根据覆盖的主题自定义了导航栏。

完整代码：

@use "sass:map";
@use "@angular/material" as mat;
@use "m3-theme.scss" as custom-theme;

$typography-config: (
  // <- notice!
  plain-family: "Edu AU VIC WA NT Pre",
  // <- notice!
  brand-family: "Edu AU VIC WA NT Pre",
  // <- notice!
); // <- notice!

$typography-config-secondary: (
  plain-family: Roboto,
  brand-family: Open Sans,
  bold-weight: 900,
  medium-weight: 500,
  regular-weight: 300,
);

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$magenta-palette,
      tertiary: mat.$violet-palette,
    ),
    typography: $typography-config,
  )
);

$theme-secondary: mat.define-theme(
  (
    color: (
      primary: custom-theme.$primary-palette,
      tertiary: custom-theme.$tertiary-palette,
    ),
    typography: $typography-config-secondary,
  )
);

body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.all-component-themes($theme);
  @include mat.toolbar-theme($theme-secondary);
}

html {
  height: 100%;
}

mat-toolbar {
  @include mat.toolbar-overrides(
    (
      container-background-color:
        mat.get-theme-color($theme-secondary, neutral, 96),
    )
  );
}

@include mat.core();
@include mat.typography-hierarchy($theme); // <- notice!

Stackblitz 演示