Here is an example of a dynamic Angular implementation of a material theme for Angular 5.1 and Angular Material 5.0.
Working editable example - https://stackblitz.com/edit/dynamic-material-theming
In the theme.scss file, specify the default theme (note that it is not stored under the class name - this means that Angular will use it by default), and then a light and dark theme.
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, 700, 100, 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) }
In your app.component file, enable OverlayContainer from @ angular / cdk / overlay. You can find the Angular documentation for this here https://material.angular.io/guide/theming ; although their implementation is slightly different. Note that I also had to include OverlayModule as an import in app.module.
In my app.component file, I also declared @HostBinding('class') componentCssClass; as a variable that will be used to set the theme as a class.
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 {}
Finally, call the onSetTheme function from your view.
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>
You might consider using observable so that the functionality is more dynamic.