Custom Theme for Angular Material Components Series: Part 3 — Apply Theme

👉 Update: This article was written for Angular v8, if you want this in Angular v9, please visit my article on DEV.to: Custom Theme for Angular Material Components Series: Part 3 — Apply Theme

Credit: https://photos.icons8.com/blue-wooden-material-5b7ec7948b658800015f72ee

Summary

Let’s Start Photo by Jon Tyson on Unsplash

1. Understand theme of MatToolbar

2. Apply MatToolbar’s theme to MatSidenav and MatDialog

<mat-sidenav #sidenav mode="side" opened [attr.color]="themeColor">
</mat-sidenav>

You can set the value of an attribute directly with an attribute binding. You must use attribute binding when there is no element property to bind. You can read more about the same at Attribute Binding Guide.

themeColor = “primary” | “accent” | “warn”
Hooray Credit : https://tenor.com/tlFR.gif
...
@import './app/shared/components/dialog/dialog.component.scss-theme.scss';
@mixin custom-components-theme($theme) {
...
@include dialog-component-theme($theme);
}
<app-sidenav [themeColor]="themeColor">Main Content<button mat-raised-button [color]="themeColor" (click)="openDialog()">Open Dialog</button></app-sidenav>
themeColor = '';
constructor(public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
panelClass: 'custom-dialog',
data: {
themeColor: this.themeColor
}
});
}
themeColor = “primary” | “accent” | “warn”

3. Create a different theme for MatSnackbar and create nice styling for different kind of notifications (default, info, success, warning, error)

ng g s shared/services/notification
// Theme for notifications / snackbar$notifications-theme : ( default: #FFF, info: mat-color(mat-palette($mat-blue), 400), success: mat-color(mat-palette($mat-green), 400), warning: mat-color(mat-palette($mat-yellow), 400), error: mat-color(mat-palette($mat-red), 400));
@include custom-components-theme($theming-material-components-theme, $notifications-theme);
...
@import './app/shared/services/notification.scss-theme.scss';
...
@mixin custom-components-theme($theme, $notifications-theme) {
...
@include notification-theme($notifications-theme);
}
<app-sidenav [themeColor]="themeColor"> Main Content
<br>
<button mat-raised-button [color]="themeColor" (click)="openDialog()">Open Dialog</button>
<br>
<button mat-raised-button [color]="themeColor" (click)="openNotification()">Open Default Notification</button></app-sidenav>
import { NotificationService } from './shared/services/notification.service';
...
constructor(public dialog: MatDialog,
public notification: NotificationService){}
...
openNotification() {
this.notification.default('Default Notification');
}
...
default, info, success, warning and error notifications

Thank You,

Photo by Samuel Zeller on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store