如何不使用SCSS自定义Angular Material主题？

当然可以！我完全理解构建服务器配置SCSS头疼的感觉——纯CSS搭配自定义调色板完全能实现Angular Material 2的自定义主题，下面是具体的操作步骤，亲测有效：

1. 先定义你的自定义调色板变量 #

在全局样式文件（比如styles.css）里，用CSS自定义属性（变量）定义好你需要的主色、强调色、警告色的各个色调，后续复用起来会非常方便：

:root {
  /* 主色调 - 从浅到深 */
  --custom-primary-50: #f0f9ff;
  --custom-primary-100: #e0f2fe;
  --custom-primary-200: #bae6fd;
  --custom-primary-300: #7dd3fc;
  --custom-primary-400: #38bdf8;
  --custom-primary-500: #0ea5e9;
  --custom-primary-600: #0284c7;
  --custom-primary-700: #0369a1;
  --custom-primary-800: #075985;
  --custom-primary-900: #0c4a6e;

  /* 强调色调 */
  --custom-accent-50: #fdf4ff;
  --custom-accent-100: #fae8ff;
  --custom-accent-200: #f5d0fe;
  --custom-accent-300: #f0abfc;
  --custom-accent-400: #e879f9;
  --custom-accent-500: #d946ef;
  --custom-accent-600: #c026d3;
  --custom-accent-700: #a21caf;
  --custom-accent-800: #86198f;
  --custom-accent-900: #701a75;

  /* 警告色调 */
  --custom-warn-50: #fffbeb;
  --custom-warn-100: #fef3c7;
  --custom-warn-200: #fde68a;
  --custom-warn-300: #fcd34d;
  --custom-warn-400: #fbbf24;
  --custom-warn-500: #f59e0b;
  --custom-warn-600: #d97706;
  --custom-warn-700: #b45309;
  --custom-warn-800: #92400e;
  --custom-warn-900: #78350f;
}

2. 覆盖Angular Material的默认主题变量 #

Angular Material的组件依赖一系列CSS变量来控制颜色，我们只需要把这些变量替换成自定义的即可。比如针对全局主题类和组件类：

/* 全局主色覆盖 */
.mat-primary {
  --mdc-theme-primary: var(--custom-primary-500);
  /* 针对按钮、开关等组件的具体变量，按需添加 */
  --mat-raised-button-color: var(--custom-primary-500);
  --mat-button-toggle-checked-button-color: var(--custom-primary-500);
}

/* 全局强调色覆盖 */
.mat-accent {
  --mdc-theme-secondary: var(--custom-accent-500);
}

/* 全局警告色覆盖 */
.mat-warn {
  --mdc-theme-error: var(--custom-warn-500);
}

/* 组件状态样式覆盖（比如hover、active） */
.mat-raised-button.mat-primary:hover {
  background-color: var(--custom-primary-600);
}

.mat-raised-button.mat-primary:active {
  background-color: var(--custom-primary-700);
}

3. 全局应用主题（可选） #

如果你不想给每个组件都手动加mat-primary、mat-accent类，可以直接在根组件的最外层元素（比如app.component.html的容器<div>）加上class="mat-app-background"，然后在全局样式里设置全局主题变量：

.mat-app-background {
  --mdc-theme-primary: var(--custom-primary-500);
  --mdc-theme-secondary: var(--custom-accent-500);
  --mdc-theme-error: var(--custom-warn-500);
}

小提示 #

如果遇到某个组件的样式没覆盖到位，直接用浏览器的开发者工具 inspect 该元素，找到它对应的CSS变量或者类名，然后针对性地添加覆盖规则就行。虽然比用SCSS生成主题多费点功夫，但完全能满足自定义需求，完美避开SCSS配置的麻烦！

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