单Web应用多主题最佳实践：覆盖主题还是为工具栏单独建主题？

不推荐纯CSS硬覆盖，因为Angular Material组件的样式包含大量状态（hover、active、focus）和封装的层级选择器，硬写CSS容易遗漏场景，后期维护成本高。利用Material官方的主题系统实现单独主题，工作量更小，且完全符合框架规范，适合学习阶段的开发者。

实现步骤及代码示例 #

1. 在全局样式文件中定义工具栏专属主题 #

打开项目的全局样式文件（通常是src/styles.scss），在已有的基础主题代码下方，添加工具栏主题的定义：

// 1. 定义工具栏专属的调色板
$toolbar-primary: mat.define-palette(mat.$indigo-palette, 700);
$toolbar-accent: mat.define-palette(mat.$pink-palette, A200);
$toolbar-warn: mat.define-palette(mat.$red-palette);

// 2. 创建工具栏主题（包含自定义排版）
$toolbar-theme: mat.define-light-theme((
  color: (
    primary: $toolbar-primary,
    accent: $toolbar-accent,
    warn: $toolbar-warn,
  ),
  typography: mat.define-typography-config(
    font-family: '"Roboto Condensed", sans-serif',
    headline-small: mat.define-typography-level(24px, 32px, 500),
  )
));

// 3. 生成工具栏及内部组件的主题样式
.toolbar-theme {
  @include mat.toolbar-theme($toolbar-theme);
  // 如果工具栏内有mat-button等组件，需额外包含对应组件的主题
  @include mat.button-theme($toolbar-theme);
}

2. 在模板中为mat-toolbar应用主题类 #

在组件模板（比如app.component.html）中，给目标mat-toolbar添加.toolbar-theme类：

<!-- 页面主体使用基础主题 -->
<div class="page-content">
  <!-- 其他页面内容 -->
</div>

<!-- 工具栏使用专属主题 -->
<mat-toolbar class="toolbar-theme" color="primary">
  <span>专属主题工具栏</span>
  <span class="example-spacer"></span>
  <button mat-button>操作按钮</button>
</mat-toolbar>

3. 补充精细排版控制（可选） #

如果需要更个性化的文本样式，可直接在主题类中添加额外规则：

.toolbar-theme {
  @include mat.toolbar-theme($toolbar-theme);
  @include mat.button-theme($toolbar-theme);
  
  // 强制覆盖工具栏文本样式
  span {
    font-weight: 600;
    letter-spacing: 0.5px;
  }
}

简化方案：利用CSS变量快速覆盖（适合快速需求） #

如果觉得定义完整主题太繁琐，可借助CSS变量快速定制，无需修改主题结构：

// 在全局样式中定义自定义变量
:root {
  --toolbar-bg: #1a237e;
  --toolbar-text: #ffffff;
  --toolbar-font: '"Roboto Condensed", sans-serif';
}

// 覆盖工具栏及内部按钮样式
.mat-toolbar.toolbar-custom {
  background-color: var(--toolbar-bg);
  color: var(--toolbar-text);
  font-family: var(--toolbar-font);
  
  .mat-button {
    color: var(--toolbar-text);
    &:hover {
      background-color: rgba(255,255,255,0.1);
    }
  }
}

模板中使用：

<mat-toolbar class="toolbar-custom">...</mat-toolbar>

这种方式适合简单样式定制，但状态覆盖不如完整主题全面。

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