material theme 自定义_Material使用06 自定义主题、黑夜模式\白天模式切换

需求：

1 不使用materil依赖内建的主题，使用自己创建的主题

2 利用自己创建的主题实现白天模式和黑夜模式

1 自定义主题

1.1 创建自定义主题文件 them.scss

//引入material自定义主题支持

@import '~@angular/material/theming';//引入material公用的主题风格

@include mat-core();//自定义颜色

$my-app-primary: mat-palette($mat-blue);

$my-app-accent: mat-palette($mat-teal, A200, A100, A400);

$my-app-warn: mat-palette($mat-red);//利用自定义颜色组装自定义主题

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);//设置自定义主题，使其生效

@include angular-material-theme($my-app-theme);

View Code

1.1.1 引入material主题支持和material公用的主题风格

//引入material自定义主题支持

@import '~@angular/material/theming';//引入material公用的主题风格

@include mat-core();

1.1.2 根据material公用的主题风格设定自己的主题颜色

//自定义颜色

$my-app-primary: mat-palette($mat-blue); //主色

$my-app-accent: mat-palette($mat-teal, A200, A100, A400); //副色

$my-app-warn: mat-palette($mat-red); //警告色

代码解释01： $my-app-primary就是一个自定义的变量

代码解释02： $mat-blue表示使用material主题风格中的blue这种颜色

代码解释03： $my-app-primary: mat-palette($mat-blue); 表示通过material主题风格的函数将material主题风格中的blue颜色赋值给$my-app-primary变量

技巧01：如何查看material的主题风格中提供了哪些颜色 -> 点击前往

1.1.3 利用自己的主题颜色组成自定义主题

//利用自定义颜色组装自定义主题

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

1.1.4 设置主题颜色使其生效

//设置自定义主题，使其生效

@include angular-material-theme($my-app-theme);

1.2 在全局样式文件中引入自定义的主题文件them.scss

技巧01：需要将默认引入的materi内建主题注释掉

/*You can add global styles to this file, and also import other style files*/

//@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 导入material的内建主体

@import 'theme.scss';

html, body, app-root, md-sidenav-container, .site {

width:100%;

height:100%;

margin:0;

}

.site {

display: flex;

flex-direction: column;

}

header {//background-color: skyblue;

}

main {

flex:1;

}

footer {//background-color: skyblue;

}

.fill-remaining-space { //flex项目自动填充多余空间

flex: 1 1auto;

}

.full-width {

width:100%;

}

View Code

1.3 效果如下

2 利用多主题实现多模式

2.1 添加黑夜主题

// 引入material自定义主题支持

@import '~@angular/material/theming';

// 引入material公用的主题风格

@include mat-core();

// 自定义颜色

$my-app-primary: mat-palette($mat-green);

$my-app-accent: mat-palette($mat-amber, A200, A100, A400);

$my-app-warn: mat-palette($mat-red);

// 利用自定义颜色组装自定义主题

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

// 设置自定义主题，使其生效

@include angular-material-theme($my-app-theme);

// 自定义颜色

$my-dark-primary: mat-palette($mat-blue-grey); // 主色

$my-dark-accent: mat-palette($mat-amber, A200, A100, A400); // 副色

$my-dark-warn: mat-palette($mat-deep-orange); // 警告色

// 利用自定义颜色组装自定义主题

$my-dark-theme: mat-dark-theme($my-dark-primary, $my-dark-accent, $my-dark-warn);

// 设置自定义主题，使其生效

.myapp-dark-theme{@include angular-material-theme($my-dark-theme);}

View Code

技巧01：将黑夜主题放在一个class类中进行引入，当这个类被激活时就表示开启黑夜模式

技巧02：主题只能对material相关的组件生效，其余的组件不会生效；我们可以将最外层组件生效myapp-dark-theme样式时添加最外层组件的背景颜色