Angular 19/Material 3主题自定义问题：Toolbar颜色不匹配

核心问题原因 #

你混淆了Material 3颜色系统中的primary和primary-container两个色值：

• primary是你明确指定的#0097A7主色
• primary-container是Material 3基于主色自动生成的衍生容器色（通常是主色在对应色调下的柔和变体），和你设定的#0097A7本身就不是同一个颜色，所以显示结果自然不匹配。

具体解决步骤 #

1. 直接使用指定的主色（带透明度）
   如果你本来就想用到#0097A7，只需要把代码里的primary-container换成primary即可：

   background-color: rgba(mat.get-theme-color($theme, primary), 0.95);
   

2. 自定义primary-container的色值（如果确实需要用这个色阶）
   打开你的m3-theme-orange-blue.scss主题文件，找到主调色板的定义部分，手动指定primary-container的色值：

   $m3-theme-orange-blue-primary: mat.define-palette(
     mat.$azure-palette, // 保留你原本使用的基础调色板
     500, // primary主色的色调等级
     // 手动指定primary-container的色值
     primary-container: #0097A7
   );
   

   这样primary-container就会使用你设定的#0097A7，再加上透明度后就能得到预期效果。

3. 检查主题注入是否正确
   确保你的Toolbar主题混合器正确接收了$theme变量，并且在主题文件中被调用：

   // 自定义Toolbar混合器
   @mixin toolbar-theme($theme) {
     .mat-toolbar {
       background-color: rgba(mat.get-theme-color($theme, primary), 0.95);
     }
   }
   

   在m3-theme-orange-blue.scss末尾添加：

   @include toolbar-theme($m3-theme-orange-blue);
   

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