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

亦凉 2021-09-28 04:08 411阅读 0赞

# 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';

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

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

您还可以将文件与应用程序的其余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 '~@angular/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 '~@angular/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，其中包含常见行为（如涟漪）的主题特定样式。

## 配置你自己的组件主题 ##

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

[theming-your-components.md]: https://material.angular.io/guide/theming-your-components