如何将CSS变量与Angular Material自定义主题结合？是否为最佳实践？

项目中已定义全局CSS变量：

:root {
  --color-primary: #65A518;
  --color-primary-hover: #558817;
  --color-primary-dark: #006729;
  --color-white: #FFFFFF;
}

现在要引入Angular Material，需创建如下自定义Sass调色板：

$custom-brand-primary: (
  50: '#edf3e7',
  100: '#d2e2c3',
  200: '#b4cf9c',
  300: '#95bc74',
  400: '#7fad56',
  500: $custom-primary,
  600: '#609732',
  700: '#558d2b',
  800: '#4b8324',
  900: '#3a7217',
  contrast: (
    50: $black,
    100: $black,
    200: $black,
    300: $black,
    400: $white,
    500: $white,
    600: $white,
    700: $white,
    800: $white,
    900: $white
  )
);

需要解决三个问题：

1. 如何将已有的CSS变量与Angular Material自定义调色板结合？
2. 如何在Angular Material主题中使用CSS变量？
3. 这种混合使用CSS变量与Material Sass调色板的方式是否为最佳实践？

1. 结合CSS变量与Material自定义调色板的步骤 #

核心思路是用CSS变量的值填充Sass调色板，同时让Material主题生成的样式复用全局CSS变量，具体操作如下：

步骤1：在Sass文件中关联CSS变量 #

在theme.scss（或对应主题Sass文件）中，通过var()函数将CSS变量转换为可被Sass调色板使用的值：

// 从全局CSS变量读取值，定义为Sass变量（可选，也可直接在调色板中用var()）
$custom-primary: var(--color-primary);
$custom-white: var(--color-white);
$custom-black: #000000;

// 重构自定义调色板，复用已有CSS变量
$custom-brand-primary: (
  50: '#edf3e7',
  100: '#d2e2c3',
  200: '#b4cf9c',
  300: '#95bc74',
  400: '#7fad56',
  500: $custom-primary,
  600: var(--color-primary-hover),
  700: '#558d2b',
  800: '#4b8324',
  900: var(--color-primary-dark),
  contrast: (
    50: $custom-black,
    100: $custom-black,
    200: $custom-black,
    300: $custom-black,
    400: $custom-white,
    500: $custom-white,
    600: $custom-white,
    700: $custom-white,
    800: $custom-white,
    900: $custom-white
  )
);

步骤2：生成并应用Material主题 #

用Angular Material的主题函数生成主题，同时确保全局样式与Material组件样式协同：

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

// 初始化Material主题系统
@include mat-core();

// 注册自定义调色板生成主题
$custom-theme: mat-light-theme(
  mat-palette($custom-brand-primary),
  mat-palette($mat-accent),
  mat-palette($mat-warn)
);

// 将主题应用到所有Material组件
@include angular-material-theme($custom-theme);

// 可选：用CSS变量覆盖Material组件默认样式，实现统一控制
.mat-button {
  background-color: var(--color-primary);
  &:hover {
    background-color: var(--color-primary-hover);
  }
}

2. 在Angular Material主题中使用CSS变量的两种方式 #

方式1：直接在Sass调色板中引用 #

如步骤1所示，在定义Sass调色板时用var(--xxx)替换硬编码颜色值，Material生成的主题样式会直接使用CSS变量，后续修改CSS变量即可同步更新组件颜色。

方式2：用CSS变量覆盖组件样式 #

如果不想修改Sass调色板，可在全局样式文件中针对Material组件类名，用CSS变量覆盖默认样式：

/* 覆盖Material主色按钮背景 */
.mat-primary .mat-button {
  background-color: var(--color-primary);
}

/* 覆盖Material卡片背景色 */
.mat-card {
  background-color: var(--color-white);
}

这种方式更灵活，适合快速调整个别组件样式，无需重新编译Sass。

3. 混合方式是否为最佳实践？ #

需结合场景判断：

• 适合场景：
  • 已有基于CSS变量的设计系统，不想完全重构为Sass变量
  • 需要实现动态主题切换（如暗黑/亮色模式），CSS变量可在客户端实时修改，无需重新编译Sass
  • 团队更熟悉CSS变量，降低学习成本
• 不适合场景：
  • 新项目无历史CSS变量包袱，直接用Sass调色板更符合Material原生工作流，编译时可优化样式
  • 需要使用Material高级调色功能（如自动生成渐变、对比度适配），Sass变量能更好配合内置函数，而CSS变量无法在编译阶段被Sass处理

总体来说，这种混合方式是可行且实用的过渡方案，尤其适合已有项目引入Angular Material时复用现有代码；若为新项目，建议优先遵循Material原生Sass主题方案，再根据需求引入CSS变量实现动态主题。

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