Angular Material主题颜色使用咨询：Angular 5自定义主题配置问题

嘿，看起来你已经把Angular Material主题的基础架子搭起来了！我来帮你把主题颜色的使用细节讲清楚，包括让基础主题生效、备用主题切换，还有在自己的组件里用上这些颜色。

一、先确保基础主题正常生效 #

你写的基础主题代码逻辑是对的，只需要再确认两个关键点：

• 把你的theme.scss导入到全局样式文件（比如项目根目录的styles.scss）里，或者在angular.json的styles数组中配置这个文件的路径，这样主题样式才能全局作用到所有Material组件上。
• 你用了mat-light-theme生成浅色模式主题，所有Material组件会自动应用你定义的$custom-primary（深紫600）、$custom-accent（ lime 100）、$custom-warn（默认红色）这些配色。

你的基础主题代码可以保持这样：

@import '~@angular/material/theming';
@include mat-core();

// 基础主题调色板
$custom-primary: mat-palette($mat-deep-purple,600);
$custom-accent: mat-palette($mat-lime, 100);
$custom-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);

二、完成备用主题的配置与切换 #

你已经定义了$alt-primary和$alt-accent，接下来几步就能让备用主题生效并实现切换：

1. 先完整定义备用主题的调色板和主题对象：

// 备用主题
$alt-primary: mat-palette($mat-yellow);
$alt-accent: mat-palette($mat-grey, 200);
$alt-warn: mat-palette($mat-red); // 可以复用基础主题的警告色，也可以自定义新颜色
$alt-theme: mat-light-theme($alt-primary, $alt-accent, $alt-warn);

2. 把备用主题的样式包裹在一个自定义CSS类里，这样我们可以通过添加/移除类来切换主题：

.alternative-theme {
  @include angular-material-theme($alt-theme);
}

3. 在组件里用TypeScript控制主题切换，比如给按钮绑定一个点击事件：

toggleAlternativeTheme() {
  // 给body元素切换类，也可以换成app-root组件元素
  document.body.classList.toggle('alternative-theme');
}

三、在自定义组件中直接使用主题颜色 #

如果你想在自己写的组件样式里用上主题的颜色值，有两种常用方式：

1. 导出主题变量供全局使用：在theme.scss里添加导出配置，这样其他SCSS文件可以引用这些颜色：

// 在theme.scss末尾添加，导出主题颜色变量
:export {
  primaryColor: mat-color($custom-primary);
  accentColor: mat-color($custom-accent);
  warnColor: mat-color($custom-warn);
}

然后在组件SCSS里可以这样用：

.my-custom-box {
  background-color: var(--primaryColor);
}

2. 直接在组件SCSS中调用Material调色板函数：先导入Material主题文件，然后用mat-color函数获取颜色：

// 组件的SCSS文件开头先导入Material主题
@import '~@angular/material/theming';

.my-custom-button {
  // 使用基础主题的primary主色
  background-color: mat-color($custom-primary);
  color: white;
}

.my-light-text {
  // 使用primary调色板的100色调（更浅的颜色）
  color: mat-color($custom-primary, 100);
}

四、几个小提醒 #

• 要确保你的@angular/material版本和Angular 5兼容，应该安装@angular/material@5.x.x版本，避免出现样式兼容问题。
• 如果想要深色主题，只需要把mat-light-theme换成mat-dark-theme，它会自动调整文本和背景的对比度，适配深色模式。

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