如何在Angular应用中使用Angular Material主题颜色作为组件背景色

我完全明白你碰到的麻烦了——明明Angular Material的主题已经配置好，组件样式都正常，但想把主题里的主色拿来当某个组件的背景色时，试了好几种写法都报错，总是拿到一堆调色板的参数而不是正经的CSS颜色值。别着急，我来帮你搞定这个问题！

问题根源 #

你之前尝试的方法之所以失败，是因为mat.define-palette返回的是一个包含所有色调（50、100、200...A400等）的调色板映射对象，而不是单一的颜色值。直接把这个对象赋值给CSS变量，浏览器自然会报错说这不是有效的CSS值。

正确的解决方法 #

我们需要从调色板中提取出具体的颜色值（比如主色的默认色调500），再赋值给CSS变量，这样就能正常使用了。

方法一：直接从调色板提取颜色

在你的styles.scss主题配置代码之后，添加以下代码来定义CSS变量：

// 你的主题配置代码保持不变...
$ui-primary: mat.define-palette(mat.$indigo-palette);
$ui-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$ui-warn: mat.define-palette(mat.$red-palette);
// ...其他配置...
$ui-theme: mat.define-light-theme((
  color: (
    primary: $ui-primary,
    accent: $ui-accent,
    warn: $ui-warn,
  ),
  typography: $typography,
));
@include mat.all-component-themes($ui-theme);

// 定义全局CSS变量，提取主色的默认色调（500）
:root {
  --app-primary: #{mat.get-color-from-palette($ui-primary, 500)};
}

然后在你的组件CSS/SCSS里就可以直接使用这个变量了：

.my-custom-component {
  background-color: var(--app-primary);
}

方法二：从已定义的主题中提取颜色

如果你想从已经组装好的$ui-theme里获取主色，也可以这么写：

:root {
  --app-primary: #{mat.get-color-from-palette(mat.get-theme-color($ui-theme, primary), 500)};
}

这里mat.get-theme-color($ui-theme, primary)会先从主题对象里取出primary调色板，再用mat.get-color-from-palette提取具体的色调值。

拓展：使用其他色调 #

如果你需要主色的浅色调、深色调或者强调色，只需要把get-color-from-palette的第二个参数换成对应的色调名称或数字就行：

:root {
  --app-primary-light: #{mat.get-color-from-palette($ui-primary, 100)};
  --app-primary-dark: #{mat.get-color-from-palette($ui-primary, 700)};
  --app-accent: #{mat.get-color-from-palette($ui-accent, A200)};
}

总结 #

核心就是先从调色板中提取出单一的CSS颜色值，再通过CSS变量传递给组件使用，而不是直接把整个调色板对象赋值给变量。按照上面的方法来，你就能顺利把Angular Material的主题色用在组件背景上啦！

备注：内容来源于stack exchange，提问作者Jeanluca Scaljeri