How to create custom theme in Angular Material

If you are working on an Angular application, you might need to create a custom Angular Material theme to make your project brand look better.

In this article we will learn how to create custom theme in Angular Material in Angular Application.

Setup Angular Project
Create a new Angular project using following command

ng new angular-material-theme

Go inside project folder.

cd angular-material-theme

Implement Angular Material Theme
Run the following given command to implement angular material

ng add @angular/material

You can select any theme from Angular Material pre-built themes.

Create Angular Material Module File
Now let’s create a angular-material.module.ts file on root.

Angular Material Module

Import Angular Material module file inside the app.module.tsfile.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularMaterialModule } from './angular-material.module';


@NgModule({
  declarations: [AppComponent],
  imports: [
   BrowserModule,
   BrowserAnimationsModule,
   AppRoutingModule,
   AngularMaterialModule
  ],
  providers: [...],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

Now our setup is done and we are ready to go.

Create Angular Material Layout
Now let’s create a basic Angular Material layout. To create layout we can go to Angular Material document and use some UI components.

Go to app.component.html and paste following code.

<!-- Toolbar -->
<mat-toolbar color="primary">
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>
<mat-sidenav-container class="example-container">
  <!-- Side Nav -->
  <mat-sidenav #sidenav [mode]="'side'" opened class="example-sidenav">
    <mat-nav-list>
      <a mat-list-item>
        <mat-icon>dashboard</mat-icon> Dashboard
      </a>
      <a mat-list-item>
        <mat-icon>person</mat-icon> User Profile
      </a>
      <a mat-list-item>
        <mat-icon>content_paste</mat-icon> Table List
      </a>
      <a mat-list-item>
        <mat-icon>library_books</mat-icon> Typography
      </a>
      <a mat-list-item>
        <mat-icon>location_on</mat-icon> Maps
      </a>
      <a mat-list-item>
        <mat-icon>calendar_today</mat-icon> Calendar
      </a>
    </mat-nav-list>
  </mat-sidenav>
<!-- Main Content -->
  <mat-sidenav-content>
<!-- Applying the mat-tyography class adds styles for native elements. -->
    <section class="mat-typography title-group">
      <h1>Heading Goes Here</h1>
      <mat-divider></mat-divider>
    </section>
<!-- Angular material cards -->
    <div>
      <section>
        <div class="example-label">Raised</div>
        <div class="example-button-row">
          <button mat-raised-button>Basic</button>
          <button mat-raised-button color="primary">Primary</button>
          <button mat-raised-button color="accent">Accent</button>
          <button mat-raised-button color="warn">Warn</button>
          <button mat-raised-button disabled>Disabled</button>
          <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
        </div>
      </section>
      <mat-divider></mat-divider>
    </div>
</mat-sidenav-content>
</mat-sidenav-container>

Go to app.component.scss file and paste following code.

mat-sidenav-container {
  height: 100vh;
}
.example-sidenav {
  width: 300px;
}
mat-sidenav-content {
  padding: 25px;
}
.example-label {
  display: table-cell;
  font-size: 14px;
  margin-left: 8px;
  min-width: 120px;
}
.example-button-row {
  display: table-cell;
  width: 490px;
}
.example-button-row .mat-button-base {
  margin: 8px 8px 8px 0;
}
.example-flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.example-button-container {
  display: flex;
  justify-content: center;
  width: 120px;
}

Now run the following command in your terminal.

ng serve --open

if everything goes fine you will see output like below.

Create Angular Material Custom Theme
First create a _colors.scss file inside app folder and paste below code.

You can visit Material Design Palette Generator to generate Material Design Palettes.

Now create a _theme.scss file inside app folder.

To create a custom theme in Angular material, we will have to import the theming service from the Angular Material and add the base style like given below in _theme.scss file.

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

Now import _colors.scss file in _theme.scss

@import './colors';

To style primary, accent, and warning color themes you must declare the color variables name using the mat-palettefunction.

You can take color palette names reference from the Material.io official website.

Add below code in your _theme.scss file.

/* ======== Angular material custom themes ======== */ 
$app-primary: mat-palette($custom-brand-primary);
$app-accent: mat-palette($custom-brand-accent);
$app-warn: mat-palette($custom-brand-warn);
$brand-light-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($brand-light-theme);

Now if you will check your browser you will see below output.

As you can see now our Primary, Accent, Warn color as implemented on our Angular application.

Create Dark Theme
To create a dark theme we will use Angular Material’s mat-dark-theme() mixin.

Add below code in _theme.scss file

$brand-dark-theme: mat-dark-theme($app-primary, $app-accent, $app-warn);
Now change value in angular-material-theme mixin.

@include angular-material-theme($brand-dark-theme);

Check you browser and you will be below output.

That’s all for the day. I hope you learnt something new today.

References:

https://angular.io/docs
https://material.angular.io/guide/theming
http://mcg.mbitson.com/

Blog

How to create custom theme in Angular Material

Kafeel Ahmad (kaf shekh)

Join Our Newsletter. No Spam, Only the good stuff.

Related