如何修改Angular Material全局阴影颜色？

需求说明 #

我需要修改Angular Material主题中的全局阴影样式，注意这和修改卡片等单个组件的阴影不同，后者已有相关解决方案。我知道该功能已经实现，但因为对Sass mixins只有初步了解，即便看到了相关实现思路，还是无法完成落地。

基础实现思路参考 #

相关实现思路里提到可以通过自定义Sass mixin来实现主题化阴影，基础代码如下：

@import '~angular/material/theming';

$myTheme: ...

@mixin my-elevation($zValue) {
  @include mat-theme-elevation($zValue, $myTheme);
}

完整实现步骤（修改阴影颜色） #

下面是完整的可落地示例，以将阴影修改为自定义颜色为例：

1. 定义自定义主题及阴影颜色
   在你的主题Sass文件（比如theme.scss）中，先定义主题的基础调色板，然后自定义阴影的颜色变量：

   @import '~@angular/material/theming';
   
   // 定义基础调色板
   $primary: mat-palette($mat-indigo);
   $accent: mat-palette($mat-pink, A200, A100, A400);
   $warn: mat-palette($mat-red);
   
   // 自定义阴影颜色（这里用深绿色作为示例）
   $custom-shadow-color: rgba(76, 175, 80, 0.5);
   
   // 创建主题，并注入自定义阴影颜色
   $my-theme: mat-light-theme((
     color: (
       primary: $primary,
       accent: $accent,
       warn: $warn,
     ),
     elevation: (
       color: $custom-shadow-color, // 全局替换阴影颜色
     )
   ));
   

2. 自定义全局 elevation mixin
   在同一文件中，创建自定义的elevation混合器，用来关联我们的主题：

   @mixin custom-elevation($z-value) {
     @include mat-theme-elevation($z-value, $my-theme);
   }
   

3. 全局应用自定义阴影
   要让所有Angular Material组件都使用这个自定义阴影，需要在主题文件中包含Angular Material的核心样式，并应用我们的主题：

   // 包含Angular Material核心样式
   @include mat-core();
   
   // 应用自定义主题到所有组件
   @include angular-material-theme($my-theme);
   

4. 为自定义组件应用阴影（可选）
   如果你的自定义组件需要使用相同的阴影样式，可以直接调用我们的自定义mixin：

   .custom-card {
     @include custom-elevation(4); // 使用z-index为4的自定义阴影
   }
   

原理说明 #

Angular Material的mat-theme-elevation mixin会读取主题中elevation.color配置的值，生成对应层级的阴影样式。通过在主题定义中覆盖elevation.color，就能全局替换所有组件的阴影颜色，不需要逐个修改组件样式。

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