Angular Material2教程入门_02_配置主题theme

Angular Material2开发入门_02_配置主题

什么是主题？

主题是将应用于Angular Material组件的颜色集。 库的主题方法基于Material设计规范的指导。

在Angular Material中，通过组合多个调色板来创建主题。 特别是，主题包括：

• 主要调色板：在所有屏幕和组件中使用最广泛的颜色。
• 重点调色板：用于浮动操作按钮和交互元素的颜色。
• 警告调色板：用于传达错误状态的颜色。
• 前景调色板：文本和图标的颜色。
• 背景调色板：用于元素背景的颜色。

在Angular Material中，所有主题样式都是在构建时静态生成的，这样您的应用就不必花费在启动时生成主题样式的周期。

使用预先构建的主题
Angular Material预先包装了几个预先构建的主题css文件。 这些主题文件还包括核心的所有样式（所有组件通用的样式），因此您只需在应用程序中包含Angular Material的单个css文件。

您可以从**@angular/material/prebuilt-themes** 直接将主题文件包含到您的应用程序中

可用的预建主题：

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

如果您正在使用Angular CLI，这就像在styles.css文件中包含一行一样简单：

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

或者，您可以直接引用该文件。 这看起来像是这样的：

<link href =“node_modules/@angular/material/prebuilt-themes/indigo-pink.css”rel =“stylesheet”>

实际路径取决于您的服务器设置。

您还可以将文件与应用程序的其余css连接起来。

最后，如果您的应用内容未放置在mat-sidenav-container元素内，则需要将mat-app-background类添加到包装元素（例如正文）。 这可确保将适当的主题背景应用于您的页面。

定义自定义主题

如果您想要比预先构建的主题提供更多自定义，则可以创建自己的主题文件。

自定义主题文件执行两项操作：

1. import mat-core（）Sass mixin。
   这包括多个组件使用的所有常见样式。 这应该只包含在您的应用程序中一次。 如果多次包含此mixin，您的应用程序将最终获得这些常见样式的多个副本。
   将主题数据结构定义为多个调色板的组合。 可以使用mat-light-theme功能或mat-dark-theme功能创建此对象。 然后将此函数的输出传递给angular-material-theme mixin，它将输出主题的所有相应样式。
   典型的主题文件将如下所示：

@import '[email protected]/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

你只需要这个单一的Sass文件;您不需要使用Sass来设置应用程序的其余部分。

如果您使用的是Angular CLI，则内置支持将Sass编译为css;你只需要在angular.json中指向主题文件的“样式”列表中添加一个新条目（例如，unicorn-app-theme.scss）。

如果您没有使用Angular CLI，则可以使用任何现有的Sass工具来构建文件（例如gulp-sass或grunt-sass）。最简单的方法是使用node-sass CLI;你只需运行：

node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css

然后在index.html中包含输出文件。

您的自定义主题文件不应导入其他SCSS文件。这将在CSS输出中复制样式。如果你想在其他SCSS文件中使用你的主题定义对象（例如，$ candy-app-theme），那么主题对象的定义应该被分解为它自己的文件，与mat-core和angular的包含分开-material-theme mixins。

主题文件可以与应用程序的css的其余部分连接和缩小。

请注意，如果将生成的主题文件包含在Angular组件的styleUrls中，则这些样式将受该组件的视图封装的约束。

配置多个主题

您可以通过多次包含angular-material-theme mixin为应用程序创建多个主题，其中每个包含都由一个额外的CSS类控制。

记得只包含**@ mat-core mixin**一次; 它不应该包含在每个主题中。

定义多个主题的示例：

@import '[email protected]/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);


// Define an alternate dark 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);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}

在上面的示例中，具有unicorn-dark-theme类的父级内部的任何组件都将使用黑暗主题，而其他组件将回退到默认的**$ candy-app-theme**。

您可以通过这种方式包含任意数量的主题。 您还可以在单独的文件中**@include angular-material-theme**，然后根据最终用户交互懒洋洋地加载它们（如何懒洋洋地加载CSS资源将根据您的应用程序而有所不同）。

然而，重要的是要记住，mat-core mixin应该只被包含一次。

多个主题和基于叠加的组件

由于某些组件（例如菜单，选择，对话框等）位于全局覆盖容器内，因此需要额外的步骤才能使这些组件受到主题的css类选择器的影响（上例中的.unicorn-dark-theme））。

为此，您可以将适当的类添加到全局覆盖容器中。 对于上面的示例，这看起来像：

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

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

主题只是某些组成部分

angular-material-theme mixin将为库中的所有组件输出样式。 如果您只使用组件的子集（或者如果要更改特定组件的主题），则可以包含特定于组件的主题混合。 您还需要包含mat-core-theme mixin，其中包含常见行为（如涟漪）的主题特定样式。

@import '[email protected]/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the theme.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the theme styles for only specified components.
@include mat-core-theme($candy-app-theme);
@include mat-button-theme($candy-app-theme);
@include mat-checkbox-theme($candy-app-theme);

配置你自己的组件主题

有关主题组件的更多详细信息，请参阅官方文档： theming-your-components.md。