Angular Material自定义主题ng serve报错：$color: null非有效颜色

问题核心 #

你的报错根源是$csn-theme中的primary色值为null，导致按钮波纹样式的rgba($color, 0.1)无法解析成有效颜色。以下是针对性的排查和修复步骤：

1. 检查调色板定义是否完整 #

确保primary、accent、warn三个核心调色板都用mat.define-palette正确生成，没有漏传参数或引用未定义的变量：

// 正确示例，可替换为你的自定义色值或Material内置调色板
$csn-primary: mat.define-palette(mat.$indigo-palette);
$csn-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$csn-warn: mat.define-palette(mat.$red-palette);

如果直接给调色板变量赋值null，或者引用了不存在的变量，必然会导致主题中的primary属性为null。

2. 确认主题对象的创建逻辑 #

必须用mat.define-light-theme或mat.define-dark-theme正确组合三个调色板，确保所有必填属性都正确传入：

$csn-theme: mat.define-light-theme((
  color: (
    primary: $csn-primary,
    accent: $csn-accent,
    warn: $csn-warn
  )
));

重点检查拼写错误（比如把primary写成primay），这种低级错误会导致主题对象中缺失primary属性，最终传递给mat.button-theme时取到null。

3. 验证主题文件的代码顺序 #

在csn-theme.scss中，代码顺序必须遵循「引入Material → 定义调色板 → 创建主题 → 引入组件主题」的逻辑：

@use '@angular/material' as mat;

// 1. 定义调色板
$csn-primary: mat.define-palette(mat.$indigo-palette);
$csn-accent: mat.define-palette(mat.$pink-palette);
$csn-warn: mat.define-palette(mat.$red-palette);

// 2. 创建主题对象
$csn-theme: mat.define-light-theme((
  color: (
    primary: $csn-primary,
    accent: $csn-accent,
    warn: $csn-warn
  )
));

// 3. 全局主题 + 组件主题
@include mat.core-theme($csn-theme);
@include mat.button-theme($csn-theme);

如果颠倒顺序（比如先引入按钮主题再定义$csn-theme），变量会未定义，直接导致null错误。

4. 检查angular.json的样式引入配置 #

确保csn-theme.scss的路径正确，且在Angular Material相关样式之后（如果有引入预构建主题的话）：

"styles": [
  // 不需要预构建主题可删除此行
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/csn-theme.scss"
]

路径错误会导致主题文件未被加载，组件无法获取到有效的主题变量。

5. 排查变量作用域问题 #

如果$csn-theme定义在局部作用域（比如嵌套的CSS规则里），mat.button-theme无法正确访问该变量，也会出现null。确保主题变量定义在文件的全局作用域下。

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