角度2材料动态主题

*编辑：这仍然适用于Angular 6

工作可编辑示例 – https://stackblitz.com/edit/dynamic-material-theming

在我的theme.scss文件中,我包含一个默认主题(注意它不是保存在类名下 – 这是Angular将它用作默认值),然后是一个明暗主题.

theme.scss

@import '~@angular/material/theming';
@include mat-core();

// Typography
$custom-typography: mat-typography-config(
  $font-family: Raleway,$headline: mat-typography-level(24px,48px,400),$body-1: mat-typography-level(16px,24px,400)
);
@include angular-material-typography($custom-typography);

// Default colors
$my-app-primary: mat-palette($mat-teal,700,100,800);
$my-app-accent:  mat-palette($mat-teal,800);

$my-app-theme: mat-light-theme($my-app-primary,$my-app-accent);
@include angular-material-theme($my-app-theme);

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

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

// Light theme
$light-primary: mat-palette($mat-grey,200,500,300);
$light-accent: mat-palette($mat-brown,200);
$light-warn: mat-palette($mat-deep-orange,200);

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

.light-theme {
  @include angular-material-theme($light-theme)
}

在app.component文件中,我包含来自@ angular / cdk / overlay的OverlayContainer.你可以在这里找到Angular的文档https://material.angular.io/guide/theming;虽然他们的实施有点不同.请注意,我还必须在App.module中包含OverlayModule作为导入.

在我的app.component文件中,我还声明了@HostBinding(‘class’)componentCssClass;作为变量,将用于将主题设置为类.

app.component.ts

import {Component,HostBinding,OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Version } from './classes/version';
import { OverlayContainer} from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})
export class AppComponent implements OnInit {

  constructor(private http: HttpClient,public overlayContainer: OverlayContainer) {}

  title = 'app';
  version: Version;
  @HostBinding('class') componentCssClass;

  ngOnInit() {
    this.getVersion();
  }

  onSetTheme(theme) {
    this.overlayContainer.getContainerElement().classList.add(theme);
    this.componentCssClass = theme;
  }

  getVersion() {
    this.http.get<Version>('/api/version')
      .subscribe(data => {
        this.version = data;
      });
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [
    AppComponent,],imports: [
    BrowserModule,HttpClientModule,BrowserAnimationsModule,MatCardModule,MatButtonModule,OverlayModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}

最后,从视图中调用onSetTheme函数.

app.component.html

<button mat-raised-button color="primary" (click)="onSetTheme('default-theme')">Default</button>
<button mat-raised-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button>
<button mat-raised-button color="primary" (click)="onSetTheme('light-theme')">Light</button>

您可以考虑使用observable,以便功能更加动态.