Angular Material 3导航栏主题不生效及编译问题求助

1. 修复编译错误 #

你的SCSS代码存在3个导致编译失败的问题：

• $typography-config末尾多余的感叹号!属于无效语法
• @include mat.core()未放在最开头（Material核心混入必须先初始化）
• $neutral变量未定义，无法调用mat-color($neutral, 900)

核心修正步骤 #

• 删除$typography-config末尾的!
• 将@include mat.core()移至所有主题定义和组件混入之前
• 在主题的color配置中添加Material 3提供的中性调色板（如mat.$gray-palette）

2. 正确设置工具栏中性色背景 #

提供两种符合Material 3规范的实现方式：

方式一：通过主题配置统一管理（推荐） #

在主题中直接配置工具栏的容器颜色，自动适配主题系统（含明暗模式）：

完整修正后的SCSS代码

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

// 初始化Material核心（必须放在最前）
@include mat.core();

$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,
      neutral: mat.$gray-palette, // 定义中性调色板
      components: (
        toolbar: (
          container-color: mat.get-color-from-palette(mat.$gray-palette, 900), // 设置工具栏中性色背景
        )
      )
    ),
    typography: $typography-config,
  )
);

html {
  height: 100%;
}

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

  // 应用主主题到所有组件
  @include mat.all-component-themes($theme);
}

@include mat.typography-hierarchy($theme);

方式二：自定义样式覆盖 #

若无需通过主题统一管理，可直接为mat-toolbar设置样式，需确保从主题中获取已定义的中性调色板：

// 在主题定义后添加
mat-toolbar {
  background-color: mat-color(mat.get-color-config($theme).neutral, 900);
}

明暗模式适配（可选） #

若需在明暗模式下自动切换工具栏背景，可创建深色主题并对应配置：

$dark-theme: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      neutral: mat.$gray-palette,
      components: (
        toolbar: (
          container-color: mat.get-color-from-palette(mat.$gray-palette, 100), // 浅色中性色适配深色模式
        )
      )
    ),
    typography: $typography-config,
  )
);

内容的提问来源于stack exchange，提问作者Roger i