官方自定义主题指南：theming guide
一、官方指南说明：
典型样例：在src目录下新建material-design.scss
@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.
$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);
然后在angular-cli.json，styles配置增加刚刚的文件即可使用
说明：
自定义主题主要需要做两件事：
- 引入mat-core() sass mixin，它包含所有通用样式，适用于多数组件，需要注意的是它只能在应用中引入一次，多次引入可能导致项目奔溃
- 定义主题的数据结构，作为主题的可用色板。它可以通过mat-light-theme或者 mat-dark-theme函数创建，输出样式传递到angular-material-theme mixin，使其对所有组件有效
主题文件不要引入到其他的scss文件中
自定义主题主要包含5中调色板：
- A primary palette: colors most widely used across all screens and components.常规状态下的所有屏幕样式与组件样式
- An accent palette: colors used for the floating action button and interactive elements.鼠标浮于上方或激活状态
- A warn palette: colors used to convey error state.表示错误状态
- A foreground palette: colors for text and icons.字体与按钮
- A background palette: colors used for element backgrounds.元素背景
如何引入
- 如果使用Angular CLI，它支持自动便宜scss文件，所以只需要在angular-cli.json文件的styles列表中引入scss文件即可
- 使用node-sass编译scss成css文件，然后index.html文件中引入css文件即刻生效
语法实例：
node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css
注意：
主题文件不可再引入到scss文件中，如果你想在其他scss文件中引入主题文件中定义的对象（如$candy-app-theme），你可以将自定义对象独立出来见一个scss文件，然后将它们分别引入其他文件中，切不可将mat-core 与 angular-material-theme mixins重复引入scss文件中
如果想在组件中引入主题样式，需要遵循view encapsulation中的组件样式规范。
引入多个主题
#######样例
@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类名的，将使用$dark-theme中定义的主题
多个主题中卫全局容器下的某个组件制定主题（如弹窗、首页中包含的组件）
你可以通过OverlayContainer向组件中注入主题类：
import {OverlayContainer} from '@angular/material';
@NgModule({
// ...
})
export class UnicornCandyAppModule {
constructor(overlayContainer: OverlayContainer) {
overlayContainer.themeClass = 'unicorn-dark-theme';
}
}
OverlayContainer的themeClass可以在任何时候更改
为特定的组件定制主题
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 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);
还是需要include mat-core-theme mixin
其他定制主题的内容
按照指南操作过程中遇到的问题
将scss文件引入angular-cli.json，不生效（不是路径问题）,改用node-sass编译
-
安装node-sass的过程
···
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
cnpm i node-sass
cnpm i -g node-sass
···
安装成功后在cmd 输入 node-sass -v
出现内容
image.png
则说明安装成功 -
输入手动编译命令报错：node-sass src/assets/scss/material-lake.scss src/assets/css/material-lake.css
Error: File to import not found or unreadable: ~@angular/material/_theming.
image.png
解决办法是：改import的路径，将@import ~@angular/material/theming';改成@import '../../../node_modules/@angular/material/theming';（最好去检查下node_modules/@angular/material目录是否有_theming.scss文件），import的theming带不带下划线都不影响
-
mat-palette的入参，必须是Material Design spec中制定的调色板名
例如使用$mat-saphire 作为入参会提示编译错误：Undefined variable
image.png -
处理了以上几个问题，就可以成功编译了
image.png
然后再index.html中引入css文件<link rel="stylesheet" href="src/assets/css/material-lake.css">
-
通过在styles.css文件中import的方式引入主题scss文件，会提示scss加了注释导致项目编译报错
image.png 关于语法
theme.scss文件中$candy-app-primary、$candy-app-accent、$candy-app-warn可以随意替换，但数量不能超过三个，依次对应primary、accent、warn三种状态，不填或者在组件中入参的时候写错，则取上一个样式。关于多个主题的使用
可以通过组件父类的限制，拓展出多个（自定义）样式（默认是只有三种状态的样式）
项目地址：
https://github.com/LeventZheng/ngx-lake （主要关注如何自定义与整合，页面没来得及排版）
后续计划：
结合 https://material.angular.io/components 与 http://demos.creative-tim.com/material-dashboard-pro/examples/components/buttons.html 整理一套angular material组件库出来
