如何更改 Angular Material 中的全局阴影颜色

Question

我想更改整个 Angular 材质主题的阴影。请注意，这与更改特定元素下的阴影不同，例如一张卡，已在其他地方询问过。

我知道该功能存在，但我无法实现它。原始问题和实现可以在这里看到： https://github.com/angular/components/issues/11343

我的问题是我对 Sass mixins 有非常基本的了解，所以即使我认为我的问题的答案已经给出，但它并不是以我理解的方式完成的。

在该问题的底部，它说我可以使用以下代码进行主题立面：

@import '~angular/material/theming';

$myTheme: ...

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

有人可以请一个稍微更详细的例子来说明我如何使所有阴影具有不同的颜色吗？如果它有帮助的话，这里有一个到levation.sass文件差异的链接： https://github.com/benelliott/material2/commit/73bcbd1cfad94077f77324b66712730492f4817a#diff-218a5cec8571848c0a4784fe7b90b2ce5f9eb29c040e9b9dfd1b0f82731d4381

Answer 1

我认为您需要创建一个自定义 Sass mixin 来覆盖默认的阴影颜色。首先，创建一个自定义主题文件，其中将包含自定义主题配置，包括自定义阴影颜色。然后我们可以使用 mat-theme-elevation mixin 来应用您的自定义阴影颜色。

创建一个新的 Sass 文件（例如，custom-theme.scss）并导入 Angular Material 主题：

@import '~@angular/material/theming';

// Define your custom theme
$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, A200, A100, A400);
$my-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

将自定义高度混合添加到 custom-theme.scss 文件中。这个 mixin 将使用您自定义的阴影颜色：

@import '~@angular/material/theming';

$custom-shadow-color: rgba(0, 0, 0, 0.2); // Your custom shadow color
$custom-shadow-opacity: 0.2; // Your custom shadow opacity

@mixin my-elevation($zValue) {
  @include mat-elevation($zValue, $custom-shadow-color, $custom-shadow-opacity);
}

// Create a function to apply the custom theme elevation
@mixin my-theme-elevation($zValue) {
  @include mat-theme-elevation($zValue, $my-theme);
}

最后，将自定义主题和高度应用到您的应用程序。在您的全局样式文件（例如 styles.scss）中，导入自定义主题文件并应用它：

@import './path/to/custom-theme';

@include angular-material-theme($my-theme);

// Apply the custom elevation mixin globally
body {
  @include my-elevation(2); // Example: Apply elevation with z-value 2
}

// Apply the custom theme elevation mixin
.my-custom-elevation {
  @include my-theme-elevation(4); // Example: Apply themed elevation with z-value 4
}

用法

<div class="my-custom-elevation">
  This element has a custom elevation.
</div>

确保将

rgba(0, 0, 0, 0.2)

替换为您想要的阴影颜色，并根据需要调整不透明度。