Material使用05 自定义主题、黑夜模式\白天模式切换

2022-07-16 15:35:07

需求：

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

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

1 自定义主题

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

　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

// 引入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);

　　　　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内建主题注释掉

　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

/* 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 1 auto;

}

.full-width {

    width: 100%;

}

　　1.3 效果如下

　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

2 利用多主题实现多模式

　　2.1 添加黑夜主题

　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

// 引入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);

}

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

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

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

<md-sidenav-container [class.myapp-dark-theme]="darkTheme">

  <md-sidenav #sidebar>

    <app-sidebar></app-sidebar>

  </md-sidenav>

  <div class="site">

    <header>

      <app-header (toggle)="sidebar.toggle()" (taggleDarkTheme)="switchTheme($event)"></app-header>

    </header>

    <main>

       <router-outlet></router-outlet>

    </main>

    <footer>

      <app-footer></app-footer>

    </footer>

  </div>

</md-sidenav-container>

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

md-sidenav-container.myapp-dark-theme {

    background-color: black;

}

md-sidenav {

    width: 200px;

}

　　2.2 在页眉组件添加一个按钮用于开启或者关闭黑夜模式

　　　　2.2.1 在共享模块中引入MdSlideToggleModule

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import {

  MdSidenavModule,

  MdToolbarModule,

  MdIconModule,

  MdButtonModule,

  MdIconRegistry,

  MdCardModule,

  MdInputModule,

  MdListModule,

  MdSlideToggleModule

 } from '@angular/material';

 import { HttpModule } from '@angular/http';

@NgModule({

  imports: [

    CommonModule,

    HttpModule,

    MdSidenavModule,

    MdToolbarModule,

    MdIconModule,

    MdButtonModule,

    MdCardModule,

    MdInputModule,

    MdListModule,

    MdSlideToggleModule

  ],

  declarations: [],

  exports: [

    CommonModule,

    MdSidenavModule,

    MdToolbarModule,

    MdIconModule,

    MdButtonModule,

    HttpModule,

    MdCardModule,

    MdInputModule,

    MdListModule,

    MdSlideToggleModule

  ]

})

export class SharedModule { }

　　　　2.2.2 在组件中使用MdSlideToggleModule提供的md-slide-toggle组件

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

<md-toolbar color="primary">

    <button md-icon-button (click)="openSidebar()">

        <md-icon>menu</md-icon>

    </button>

    &nbsp;

    <span>企业协作平台</span>

    <!-- &nbsp;

    <md-icon>accessibility</md-icon>

    <md-icon svgIcon="header"></md-icon> -->

    <span class='fill-remaining-space'></span>

    <md-slide-toggle (change)='onChange($event.checked)'>黑夜模式</md-slide-toggle>

</md-toolbar>

　　　　　　代码解释01：<span class='fill-remaining-space'></span>的主要作用是撑满剩余的空间

　　　　　　代码解释02：(change)='onChange($event.checked)' 的作用是当md-slide-toggle组件发生变化时执行相应的方法，参数md-slide-toggle的当前值

　　　　　　技巧01：md-slide-toggle官方文档 -> 点击前往

　　　　2.2.3 在使用md-slide-toggle的组件编写一个输出变量

　　　　　　当md-slide-toggle组件的值发生变化时就将变化后的值发送给使用md-slide-toggle这个组件的父组件

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.scss']

})

export class HeaderComponent implements OnInit {

  @Output()

  toggle = new EventEmitter<void>();

  @Output()

  toggleDarkTheme = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {

  }

  openSidebar() {

    this.toggle.emit();

  }

  onChange(eventValue: boolean) {

    // console.log('是否黑夜模式：' + eventValue);

    this.toggleDarkTheme.emit(eventValue);

  }

}

　　　　2.2.4 在父组件中监听使用md-slide-toggle的那个组件触发的事件

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

<md-sidenav-container [class.myapp-dark-theme]="darkTheme">

  <md-sidenav #sidenav mode="push">

    <app-sidenav></app-sidenav>

  </md-sidenav>

  <div class="site">

    <header>

      <app-header (toggle)="sidenav.toggle()" (toggleDarkTheme)="switchTheme($event)"></app-header>

    </header>

    <main>

      <router-outlet></router-outlet>

    </main>

    <footer>

      <app-footer></app-footer>

    </footer>

  </div>

</md-sidenav-container>

　　　　　　代码解释01：<app-header (toggle)="sidenav.toggle()" (toggleDarkTheme)="switchTheme($event)"></app-header> 当app-header组件触发toggleDarkTheme会引发使用app-haeder组件的父组件触发switchTheme方法，并将app-header组件发出的参数接收到作为switchTheme方法的参数

　　　　2.2.5 在父组件中编写switchTheme方法

　　　　　　该方法根据接收到的参数真假来判断是否开启黑夜模式对应的class类

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  darkTheme = false;

  switchTheme(dark) {

    this.darkTheme = dark;

    // alert(this.darkTheme);

  }

}

　　2.3 效果图如下

　　　　2.3.1 白天模式

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

　　　　2.3.2 黑夜模式

　　　　　　 $Material使用05 自定义主题、黑夜模式\白天模式切换$

码农公寓

1 自定义主题

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

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

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

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

1.1.4 设置主题颜色使其生效

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

1.3 效果如下

2 利用多主题实现多模式

2.1 添加黑夜主题

2.2 在页眉组件添加一个按钮用于开启或者关闭黑夜模式

2.2.1 在共享模块中引入MdSlideToggleModule

2.2.2 在组件中使用MdSlideToggleModule提供的md-slide-toggle组件

2.2.3 在使用md-slide-toggle的组件编写一个输出变量

2.2.4 在父组件中监听使用md-slide-toggle的那个组件触发的事件

2.2.5 在父组件中编写switchTheme方法

2.3 效果图如下

2.3.1 白天模式

2.3.2 黑夜模式

相关文章

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

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

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

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

　　　　1.1.4 设置主题颜色使其生效

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

　　1.3 效果如下

　　2.1 添加黑夜主题

　　2.2 在页眉组件添加一个按钮用于开启或者关闭黑夜模式

　　　　2.2.1 在共享模块中引入MdSlideToggleModule

　　　　2.2.2 在组件中使用MdSlideToggleModule提供的md-slide-toggle组件

　　　　2.2.3 在使用md-slide-toggle的组件编写一个输出变量

　　　　2.2.4 在父组件中监听使用md-slide-toggle的那个组件触发的事件

　　　　2.2.5 在父组件中编写switchTheme方法

　　2.3 效果图如下

　　　　2.3.1 白天模式

　　　　2.3.2 黑夜模式