如何在自定义Angular组件中直接使用Material Theme的primary颜色？

方法一：直接使用全局CSS变量 #

Angular Material会自动将主题核心颜色注册为全局CSS变量，你可以直接在自定义组件的样式中引用，无需额外配置：

在自定义组件的样式文件（比如my-custom.component.scss）中：

.my-custom-element {
  // 主题primary背景色
  background-color: var(--mdc-theme-primary);
  // 对应primary的文字对比色（保证可读性）
  color: var(--mdc-theme-on-primary);
}

常用的主题相关CSS变量还有：

• --mdc-theme-secondary：secondary颜色
• --mdc-theme-on-secondary：secondary对应的文字色
• --mdc-theme-error：错误色

方法二：引用SCSS主题变量（适合SCSS环境） #

如果项目用SCSS编写样式，且主题通过SCSS变量定义（比如默认的indigo-pink主题），可以直接导入主题文件后引用调色板变量：

1. 在自定义组件的样式文件顶部导入主题所在文件（假设主题定义在src/styles.scss）：

@import 'src/styles.scss';

2. 直接使用主题中的调色板和Angular Material的颜色工具函数：

.my-custom-element {
  // 获取indigo调色板的500色值（primary默认色）
  background-color: mat.get-color-from-palette($indigo-palette, 500);
  // 获取对应色值的对比文字色
  color: mat.get-color-from-palette($indigo-palette, contrast, 500);
}

注：indigo-pink主题默认的primary调色板是$indigo-palette，secondary是$pink-palette，你可以根据需要调整色值等级（比如100、500、700等）。

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