Angular Material 18主题：如何将主题颜色转为CSS自定义属性？

问题原因 #

你直接在CSS自定义属性里写mat.get-theme-color是行不通的——这个是Sass函数，只能在Sass编译阶段被解析，而CSS变量是运行时生效的。Sass编译时会把--my-alias: mat.get-theme-color(...)原封不动输出成字符串，浏览器根本识别不了这个函数调用，自然拿不到正确的颜色值。

正确实现步骤 #

1. 在全局Sass文件中预计算颜色并定义变量 #

打开你的material-theme.scss（或者全局样式文件），先完成主题定义，再用Sass插值语法#{}把函数计算出的颜色值赋值给CSS变量：

@use '@angular/material' as mat;

// 你的自定义主题定义（示例）
$my-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  )
));

// 用插值语法把Sass计算结果转成CSS变量
:root {
  --primary-50: #{mat.get-theme-color($my-theme, "primary", 50)};
  --primary-100: #{mat.get-theme-color($my-theme, "primary", 100)};
  // 按需添加其他需要的颜色变量，比如accent、warn的不同色调
}

2. 在组件中直接使用CSS变量 #

之后不管是全局样式还是组件样式，都可以直接调用变量，不需要再引入任何Sass模块：

.some-selector {
  color: var(--primary-50);
}

这样编译后，CSS变量的值会是实际的十六进制颜色码（比如#e0f2fe），浏览器就能正常识别使用了。

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