Angular Material v12如何在任意Sass文件中获取自定义主题颜色

核心问题说明 #

你之前的尝试失败是因为：Angular Material的mat.define-palette是Sass编译阶段执行的函数，必须接收静态色值（十六进制/RGB等），而var(--xxx)是浏览器运行时解析的CSS自定义属性，编译阶段Sass无法读取其实际值，因此无法直接注入调色板。

推荐方案：抽离公共色值变量，单次维护多处复用 #

步骤1：创建独立的色值配置文件 #

在项目中新建sass/_color-variables.scss文件，把所有色值统一放在这里定义为Sass变量：

// sass/_color-variables.scss
// 主色调
$primary-hover: #007bc7;
$primary: #005e98;
$dark-background: #142733;
// 强调色
$accent-hover: #ffe800;
$accent: #ffcf00;
// 对比度色值
$contrast-primary-hover: #ffffff;
$contrast-primary: #f2fcff;
$contrast-dark-background: #f2fcff;
$contrast-accent-hover: #472c00;
$contrast-accent: #472c00;

步骤2：在主题文件中引用变量定义调色板 #

修改你的my-theme.scss，直接引用上述变量定义调色板，不需要再硬编码色值：

@use '~@angular/material' as mat;
@use './app/shared/custom-styles/button.style.sass' as button;
// 引入公共色值变量
@use './sass/_color-variables.scss' as colors;

@include mat.core();

// 自定义调色板直接使用预定义的Sass变量
$back-office-palette: (
  400: colors.$primary-hover,
  500: colors.$primary,
  800: colors.$dark-background,
  A400: colors.$accent-hover,
  A500: colors.$accent,
  contrast: (
    400: colors.$contrast-primary-hover,
    500: colors.$contrast-primary,
    800: colors.$contrast-dark-background,
    A400: colors.$contrast-accent-hover,
    A500: colors.$contrast-accent
  )
);

// 后续主题定义逻辑保持不变
$back-office-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette($back-office-palette, 500),
      accent: mat.define-palette($back-office-palette, A500),
      warn: mat.define-palette(mat.$red-palette)
    )
  )
);

@include mat.all-component-themes($back-office-theme);
@include button.theme($back-office-theme);

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

步骤3：自动生成全局CSS变量，无需手动维护 #

修改根目录styles.sass，直接引用公共Sass变量生成全局CSS自定义属性，用Sass插值语法#{}把Sass变量注入CSS变量：

@use './sass/_color-variables.scss' as colors;

// 自动生成全局CSS变量，不用手动写死色值
:root
  --color-primary-hover: #{colors.$primary-hover}
  --color-primary: #{colors.$primary}
  --color-dark-background: #{colors.$dark-background}
  --color-accent: #{colors.$accent}

*
  margin: 0
  padding: 0
  box-sizing: border-box

ul
  list-style: none

提示：你可以在angular.json的项目构建配置中添加stylePreprocessorOptions.includePaths，指定Sass变量文件的目录，之后引用时不需要写完整相对路径：

"stylePreprocessorOptions": {
  "includePaths": ["src/sass"]
}

可选方案：组件Sass中直接调用Material调色板工具 #

如果不想用CSS变量，也可以直接在组件样式文件中引入公共配置和Material工具，直接读取调色板颜色：

// 示例：xxx.component.sass
@use '~@angular/material' as mat;
// 直接引入预定义的主题配置
@use './path/to/my-theme.scss' as theme;

$primary-palette: mat.get-color-config(theme.$back-office-theme).primary;

.my-custom-element
  background: mat.get-color-from-palette($primary-palette, 500)
  &:hover
    background: mat.get-color-from-palette($primary-palette, 400)

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