什么是主题

主题就是一组要应用于 Angular Material 的颜色，也可以理解成应用的皮肤。在以前使用 QQ 空间的时候，腾讯就做好多些空间皮肤（主题）进行出售。现在 Android 手机系统也都有好多主题，让用户自己手机系统的主题。

在 Angular Material 中，主题由多个调色板组成。具体来说，包括：

  • 主调色板：那些在所有屏幕和组件中广泛使用的颜色。
  • 强调调色板：那些用于浮动按钮和可交互元素的颜色。
  • 警告调色板：那些用于传达出错状态的颜色。
  • 前景调色板：那些用于问题和图标的颜色。
  • 背景色调色板：那些用做原色背景色的颜色。

预定义主题

Angular Material 自带了几个预构建主题的 css 文件。这些主题文件包含了所有核心样式（所有组件中通用的），这样你的应用就只需要包含单个 css 文件了。

有效的预定义主题有：

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

你可以从 @angular/material/prebuilt-themes 直接把主题文件包含到应用中。

如果你正在使用 Angular CLI，那么只需要在 styles.css 文件中添加一行就可以了：

  1. @import '@angular/material/prebuilt-themes/deeppurple-amber.css';

如果你使用的 ng add @angular/material 添加的依赖，Material Schematics 会在控制台给出交互信息，在选择相应的主题后，会自动将样式添加到 angular.json 中：

  1. "styles": [
  2.               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  3.               "src/styles.scss"
  4.    ],

自定义主题

自定义主题文件要做两件事：

  1. 导入 mat-core() 混入器。它包括所有功能多个组件使用的公共样式。在你的应用中，应该只包含一次该混入器。如果包含多次，你的应用就会出现这些公共样式的多个副本。
  2. 定义一个主题数据结构，它由多个调色板组成。该对象可以用 mat-light-theme 或 mat-dark-theme 函数构建。然后，函数的输出会传给 angular-material-theme 混入器，它会输出所有该主题所对应的样式。

典型的主题文件定义如下：

  1. // 引入material的theming，其中包含了混入器
  2. @import '~@angular/material/theming';
  4. // 导入核心混入器，确保只导入一次
  5. @include mat-core();
  7. // 定义主调色板
  8. $candy-app-primary: mat-palette($mat-indigo);
  10. // 强调调色板
  11. $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
  13. // 警告调色板
  14. $candy-app-warn:    mat-palette($mat-red);
  16. // 创建一个light主题
  17. $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  19. // 启动主题
  20. @include angular-material-theme($candy-app-theme);

多重主题

你可以通过多次调用 angular-material-theme 混入器，每次包含一些额外的 CSS 类，来为应用创建多个主题。

记住，只能包含 @mat-core 一次；不应该让每个主题都包含它一次。

多重主题的例子：

  1. // 引入material的theming，其中包含了混入器
  2. @import '~@angular/material/theming';
  3. // Plus imports for other components in your app.
  5. // 导入核心混入器，确保只导入一次
  6. @include mat-core();
  8. // 定义主调色板
  9. $candy-app-primary: mat-palette($mat-indigo);
  10. // 强调调色板
  11. $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
  12. // 创建一个light主题
  13. $candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
  15. // 将candy-app-theme定义成默认主题
  16. @include angular-material-theme($candy-app-theme);
  19. // 定义个深色主题.
  20. $dark-primary: mat-palette($mat-blue-grey);
  21. $dark-accent:  mat-palette($mat-amber, A200, A100, A400);
  22. $dark-warn:    mat-palette($mat-deep-orange);
  23. $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
  25. // 所有在unicorn-dark-theme样式下的组件主题都将是深色的
  26. .unicorn-dark-theme {
  27.   @include angular-material-theme($dark-theme);
  28. }

基于浮层的组件

由于某些组件（比如菜单、选择框、对话框等）位于全局的浮层容器中，所以想要让它们被主题的 css 类选择器（比如 .unicorn-dark-theme）影响到还需要做一个额外的步骤。

要做到这一点，你可以给全局浮层容器添加一个合适的类。比如上面的例子要改成这样：

  1. import {OverlayContainer} from '@angular/cdk/overlay';
  3. @NgModule({
  4.   // ...
  5. })
  6. export class UnicornCandyAppModule {
  7.   constructor(overlayContainer: OverlayContainer) {
  8.     overlayContainer.getContainerElement().classList.add('unicorn-dark-theme');
  9.   }
  10. }

当然，浮层容器也是渲染在 body 中的，所以可以在 body 中添加样式

  1. <body class="unicorn-dark-theme">
  2.     <!--....-->
  3. </body>

这样就不需要上面的 ts 类了。

主题动态切换

在上面多主题的基础上，我们实现主题的动态切换。可以通过修改 body 的 class，从而实现主题的切换。

  1. export class AppComponent {
  2.   constructor(@Inject(DOCUMENT) private document: Document) {}
  4.   changeTheme() {
  5.     const theme = 'unicorn-dark-theme';
  6.     this.document.body.classList.toggle(theme);
  7.   }
  8. }