如何实现Angular Material自定义主题

时间 2019-11-17

标签如何实现 angular material 自定义主题栏目 AngularJS 繁體版

原文原文链接

什么是主题

主题就是一组要应用于 Angular Material 的颜色，也能够理解成应用的皮肤。在之前使用 QQ 空间的时候，腾讯就作好多些空间皮肤（主题）进行出售。如今 Android 手机系统也都有好多主题，让用户本身手机系统的主题。css

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

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

预约义主题

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

有效的预约义主题有：typescript

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

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

若是你正在使用 Angular CLI，那么只须要在 styles.css 文件中添加一行就能够了：数据结构

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
复制代码

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

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
   ],
复制代码

自定义主题

自定义主题文件要作两件事：函数

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

典型的主题文件定义以下：ui

// 引入material的theming，其中包含了混入器
@import '~@angular/material/theming';

// 导入核心混入器，确保只导入一次
@include mat-core();

// 定义主调色板
$candy-app-primary: mat-palette($mat-indigo);

// 强调调色板
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// 警告调色板
$candy-app-warn:    mat-palette($mat-red);

// 建立一个light主题
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// 启动主题
@include angular-material-theme($candy-app-theme);
复制代码

多重主题

你能够经过屡次调用 angular-material-theme 混入器，每次包含一些额外的 CSS 类，来为应用建立多个主题。this

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

多重主题的例子：

// 引入material的theming，其中包含了混入器
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// 导入核心混入器，确保只导入一次
@include mat-core();

// 定义主调色板
$candy-app-primary: mat-palette($mat-indigo);
// 强调调色板
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
// 建立一个light主题
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// 将candy-app-theme定义成默认主题
@include angular-material-theme($candy-app-theme);


// 定义个深色主题.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// 全部在unicorn-dark-theme样式下的组件主题都将是深色的
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}
复制代码

基于浮层的组件

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

要作到这一点，你能够给全局浮层容器添加一个合适的类。好比上面的例子要改为这样：

import {OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
  // ...
})
export class UnicornCandyAppModule {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('unicorn-dark-theme');
  }
}
复制代码

固然，浮层容器也是渲染在 body 中的，因此能够在 body 中添加样式

<body class="unicorn-dark-theme">
    <!--....-->
</body>
复制代码

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

主题动态切换

在上面多主题的基础上，咱们实现主题的动态切换。能够经过修改 body 的 class，从而实现主题的切换。

export class AppComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  changeTheme() {
    const theme = 'unicorn-dark-theme';
    this.document.body.classList.toggle(theme);
  }
}
复制代码