> Canonical URL: https://codingcat.dev/course/angularmaterial/lesson/angular-material-theming

# Angular Material Theming | Angular Material | CodingCat.dev Course

[🧶 Angular Material](/course/angularmaterial)Section 1.4 · Lesson 4 of 8[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/github-symbol-light.svg)![](/logos/tags/github-symbol-dark.svg)GitHub](/topic/github)[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[#Design](/topic/design)[← Prev Lesson](/course/angularmaterial/lesson/firebase-authentication-and-authorization)[Next Lesson →](/course/angularmaterial/lesson/angular-material-dynamic-navigation-using-firestore)

# Angular Material Theming

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/b044c2beb2a931aec7e0e43a165fa02cd41b1f0f-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=V3WiBs-igaY&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 4 / 8Course Lessons Outline▾1Section 1
- [1.1Firebase Project Hosting](/course/angularmaterial/lesson/firebase-project-hosting)
- [1.2Angular Material Router Outlet](/course/angularmaterial/lesson/angular-material-router-outlet)
- [1.3Firebase Authentication and Authorization](/course/angularmaterial/lesson/firebase-authentication-and-authorization)
- [1.4Angular Material Theming](/course/angularmaterial/lesson/angular-material-theming)
- [1.5Angular Material Dynamic Navigation using Firestore](/course/angularmaterial/lesson/angular-material-dynamic-navigation-using-firestore)
- [1.6Angular Material Forms from Firestore](/course/angularmaterial/lesson/angular-material-forms-from-firestore)
- [1.7Angular Material Reactive Forms Update Firestore](/course/angularmaterial/lesson/angular-material-reactive-forms-update-firestore)
- [1.8Angular Material Router Awareness](/course/angularmaterial/lesson/angular-material-router-awareness)

## Angular Material Theming

Demo: [https://ajonp-lesson-10.firebaseapp.com/kitchensink](https://ajonp-lesson-10.firebaseapp.com/kitchensink) Angular Material is the officially supported components for implementing Google's Material Design System within Angular. There are 4 pre-built themes that come with Angular Material

- deeppurple-amber
- indigo-pink
- pink-bluegrey
- purple-green We are going to take a look at creating our own theme and including this in with our default style, then using this to provide mixins for each of our components styles.

> Probably the biggest complaint that I hear about Themes in Angular Material is the requirement for building an entire new set of css using the sass function, which bloats your style.css files. Please checkout Ionic CSS Variables to see a comparison of how this can be accomplished. As of writing this still remains an open issue on GitHub

## Lesson Steps

- Kitchen Sink Component
- Angular Flex-Layout
- Angular Material Theme Creation
- Theme Selection Angular Service
- Sass Mixins
- Tools

# Kitchen Sink Component

In English (maybe just USA) we say "Everythign but the kitchen sink", in programming we often will use the "Kitchensink" to refer to everything we can possible use on a site. For our example we will pull from the [Angular Material Kitchensink](https://github.com/angular/material2/blob/b21cfb73261e5c334280a185762ffcc475348b76/src/universal-app/kitchen-sink/kitchen-sink.ts) so that we can highlight all of the possible components and what the theme does to them.The components can be found on [material.angular.io/components](https://material.angular.io/components/categories) there are a few from the Component Dev Kit (CDK) as well.

## Clone Repo

Usually I would offer up a guide to build this entire thing out (and I show this in the video if you want to follow along) but to simplify things I am recommend you just clone the Lesson 10 repo (or fork it and clone yours) and check it out for this walk through.

Copied! 🐾

```
git clone
```

If you would like to follow along you can snage the Lesson 9 and work with me through the updates.

Copied! 🐾

```
git clone
```

# Angular Flex-Layout

Angular FLex-Layout or fxLayout, offeres a great alternative to creating all the css for a flexlayout by hand. It is very similar to [Bootstrap's Flex](https://getbootstrap.com/docs/4.2/utilities/flex/) but I feel as though it is even more powerful.This is a great example by tburleson:

## Toolbar

For our example we used the `nogrow` option in the toolbar so that the material icon would stay shifted off to the right using `fxFlex="nogrow"`.sidenav.component.html

Copied! 🐾

        {{ title }}

" aria-label="Copy code" title="Copy code to clipboard">

```

####
          Home

####
          Kitchen Sink

####
          Books

        menu

        {{ title }}

          format_color_fill

```

## Kitchensink

In our kitchensink example we wrapped every component with a ``, then wrapped the entire component in `` which will allow everything to stay in the center and each of the `fxFlex` items to be within a flexbox. You can see that each span will have the style `flex: 1 1 1e-09px;box-sizing: border-box;` when rendered in the html.

# Angular Material Theme Creation

You could use the 4 prebuilt themes that come with the @angular/material package, by just importing them into your style.css`@import "~@angular/material/prebuilt-themes/indigo-pink.css";``@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";``@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";``@import "~@angular/material/prebuilt-themes/purple-green.css";`

## Custom Theme

I prefer to add them directly so that you can create your own branding colors. You can't make a new unique site if you don't allow for your Brand's identity to show through (you know what I am talking about Marketing!).The best site I have found for this is [Material Design Palette Generator](http://mcg.mbitson.com/) unlike [Google's Material Color Tool](https://material.io/tools/color/), the DPG allows you to export direct to sass variables which is exactly what we need when creating an Angular Material Theme.Make sure when you choose download (the down arrow), you then choose ANGULAR JS 2 (MATERIAL 2).

## Update theme file

You can then use all of these custom variables to create new themes. The sass variable should define the full spectrum along with contrast of each color in the palette.Please make sure you include all of the material sass theming functions by adding this to the top of any theme file. You should only have this once in any project, so if this makes more sense in your style file using various `mixins` and `include` features please do this in a way that makes sense for your project.

Copied! 🐾

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

### SASS Variables

angular-material-router-theme.scss

Copied! 🐾

```
$md-purple: (
  50: #ffffff,
  100: #d3cbe7,
  200: #b2a5d5,
  300: #8974be,
  400: #775fb4,
  500: #674ea7,
  600: #5a4492,
  700: #4d3b7d,
  800: #403168,
  900: #342754,
  A100: #f9f7fd,
  A200: #b7a2ec,
  A400: #7c5dcb,
  A700: #7256b9,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);
```

Creation of the Sass variable for our new palette, here the mat-palette function is returning the color information and mappings and assigning it to `$angular-material-router-app-purple`.

Copied! 🐾

```
$angular-material-router-app-purple: mat-palette($md-purple);
```

### New Material Theme

Once you have a new palette it is finally time to create a new Sass variable `$angular-material-router-app-theme-purple` that hosts your full theme information.

Copied! 🐾

```
$angular-material-router-app-theme-purple: mat-dark-theme(
  $angular-material-router-app-purple,
  $angular-material-router-app-accent,
  $angular-material-router-app-warn
);
```

Please note I have used the default accent and warn, but you can make these any color that you would like as well. Then whenever you use `color="warn"` it could be purple or gray instead of red, please aroudnd with switching out the variables in any theme.

## Style Class Update

At this point we have only created a bunch of Sass variables that are not included in our app anywhere. In order to do this we will include them in a surrounding class, this can be done in the `style.scss` file, this should have been generated by the Angular CLI, or it is already in the `styles` folder if you cloned the repo.

### Import SCSS Theme File

First make sure you are including the new theme file that holds all of our variables, by importing the scss `@import 'angular-material-router-theme.scss';`.You can do this in any component to use the Sass variables.

### Include Theme into class variable

Now we will include inside this class the entire theme (css) for our app.

Copied! 🐾

```
...
.angular-material-router-app-theme-purple {
  $theme: $angular-material-router-app-theme-purple;
  @include angular-material-theme($theme);
}
...
```

## Sidenav Color Selector

Now that we have all of our theme colors defined we can update the sidenav button clicks styles to include the correct background color, this assigns each menu item the color and with a `border-radius` of 50% makes it a circle.sidenav.component.scss

Copied! 🐾

```
.color-swatch {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 6px;
  border-radius: 50%;
  overflow: hidden;
}
.color-swatch-primary {
  background-color: mat-color($angular-material-router-app-primary, 500);
}
.color-swatch-primary:hover {
  background-color: mat-color(
    $angular-material-router-app-primary,
    500
  ) !important;
}
.color-swatch-green {
  background-color: mat-color($angular-material-router-app-green, 500);
}
.color-swatch-green:hover {
  background-color: mat-color(
    $angular-material-router-app-green,
    500
  ) !important;
}
.color-swatch-pink {
  background-color: mat-color($angular-material-router-app-pink, 500);
}
.color-swatch-pink:hover {
  background-color: mat-color(
    $angular-material-router-app-pink,
    500
  ) !important;
}
.color-swatch-purple {
  background-color: mat-color($angular-material-router-app-purple, 500);
}
.color-swatch-purple:hover {
  background-color: mat-color(
    $angular-material-router-app-purple,
    500
  ) !important;
}
.color-swatch-yellow {
  background-color: mat-color($angular-material-router-app-yellow, 500);
}
.color-swatch-yellow:hover {
  background-color: mat-color(
    $angular-material-router-app-yellow,
    500
  ) !important;
}
.color-swatch-warn {
  background-color: mat-color($angular-material-router-app-warn, 500);
}
.color-swatch-warn:hover {
  background-color: mat-color(
    $angular-material-router-app-warn,
    500
  ) !important;
}
```

# Theme Selection Angular Service

You can read up on [Angular Services](https://angular.io/tutorial/toh-pt4) and why you should use them.

## Create color-picker Service

I like to create all of my services in a folder called `core`, I will often put other things like models in this folder as well.

Copied! 🐾

```
ng g s core/services/color-picker.service
```

In this service we need to have an initial class set for the app in variable `initialClass`, if you follow the lesson video it shows how this works with local storage in the browser. This allows a person to set the theme and not need to select on refresh. So we look there first and if we cannot fild it we just add the initial class, which is what is also set to our `BehaviorSubject`. You will also notice we are updating something called `OverlayContainer`, this comes from the [Material CDK](https://material.angular.io/cdk/overlay/overview) and allows many of the floating panels to have style.color-picker.service.ts

Copied! 🐾

```
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { OverlayContainer } from "@angular/cdk/overlay";
@Injectable({ providedIn: "root" })
export class ColorPickerService {
  initialClass = "angular-material-router-app-theme";
  colorClass$: BehaviorSubject = new BehaviorSubject(this.initialClass);
  constructor(private overlayContainer: OverlayContainer) {
    const storageClass = localStorage.getItem("color-picker");
    console.log(storageClass);
    if (storageClass) {
      overlayContainer.getContainerElement().classList.add(storageClass);
      this.colorClass$.next(storageClass);
    } else {
      overlayContainer.getContainerElement().classList.add(this.initialClass);
    }
  }
  getColorClass() {
    return this.colorClass$;
  }
  setColorClass(className: string) {
    this.overlayContainer.getContainerElement().classList.forEach(css => {
      this.overlayContainer.getContainerElement().classList.remove(css);
    });
    this.overlayContainer.getContainerElement().classList.add(className);
    this.colorClass$.next(className);
    localStorage.setItem("color-picker", className);
  }
}
```

## Update App for Theme Class

Now that we have all the underling items taken care of we need to actually update the app's class on the fly. This is again why I like to create everything in Modules away from the app component, because it makes this part look very clean.You will add the behavior subject to the entire app just by adding `[ngClass]="themeClass | async"`. This will take the last Observable string for the class name and assign in when the service broadcasts.app.component.html

Copied! 🐾

```

```

We of course need to tell our html where this came from by updating our `app.component.ts` file by using dependency injection to add our new `color-service`.app.component.ts

Copied! 🐾

```
import { ColorPickerService } from "./core/services/color-picker.service";
import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  title = "angular-material-router-outlet";
  themeClass;
  constructor(private colorPicker: ColorPickerService) {
    this.themeClass = this.colorPicker.getColorClass();
  }
  ngOnInit(): void {}
}
```

# Sass Mixins

The easiest way to create color on those items that dont allow the `color` directive, is to create a mixin based on our current theme's color. For instance in our kitchensink `mat-grid-list` does not offer color, but we can add it to the background by providing a mixin.

## Add Mixin to Theme

angular-material-router-theme.scss

Copied! 🐾

```
@mixin mat-grid-mixin($theme) {
  $primary: map-get(
    $map: $theme,
    $key: primary
  );
  mat-grid-tile {
    background-color: mat-color($primary, 500);
    color: mat-contrast($primary, 500);
  }
}
```

Include the mixin `@include mat-grid-mixin($theme);` update when each theme class is selected. Now anything with mat-grid-tile will receive the background color of the current primary theme color. You can get any key that you want from the sass function `map-get` and use it in the `mat-color` and `mat-contrast` functions.

Copied! 🐾

```
.angular-material-router-app-theme-purple {
  $theme: $angular-material-router-app-theme-purple;
  @include angular-material-theme($theme);
  @include mat-grid-mixin($theme);
}
```

## Create Mixin outside of Theme

Lets say that just in our kitchensink example we want to make all the buttons switch from a standard radius

to a more rounded radius

We can add a new mixin fileangular-button-large-radius.scss

Copied! 🐾

```
@mixin angular-button-large-radius {
  .mat-raised-button,
  .mat-stroked-button,
  .mat-flat-button {
    border-radius: 45px;
  }
}
```

Then just include this into our kitchensink sass.

Copied! 🐾

```
@import '../../../styles/angular-button-large-radius.scss';
@include angular-button-large-radius;
```

# Tools

## Tools Used In Lesson

- [Angular Flex-Layout](https://github.com/angular/flex-layout)
- [Material Design Palette Generator](http://mcg.mbitson.com/)
- [Sass Guide](https://sass-lang.com/guide)
- [Angular Material Theming](https://material.angular.io/guide/theming)
- [Angular Material Kitchensink](https://github.com/angular/material2/blob/b21cfb73261e5c334280a185762ffcc475348b76/src/universal-app/kitchen-sink/kitchen-sink.ts)

## Additional Tools

- [tburleson Layout Demos](https://tburleson-layouts-demos.firebaseapp.com/#/docs)
- [Material IO](https://material.io/)
- [SketchApp](https://www.sketchapp.com/)
- [Material Sketch Plugin](https://material.io/tools/theme-editor/)
- [Ionic CSS Variables](https://beta.ionicframework.com/docs/theming/color-generator)

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ through the layered stack topology from input contract to production output.

Let’s build it!✏️ Architecture Diagram: Angular Material: Angular Material ThemingLAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Angular Material: Angular Material Theming: Section 1 -> Angular Material -> Verified Production Artifact.AAA Contrast Verified

## related deep dives.

[View All→](/blog)[![The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](https://cdn.sanity.io/images/hfh83o0w/production/e81cb7bdd395cf1351722a2e6357da97cc3c1ed6-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-intermediate-html-and-css-grid)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[#Design](/topic/design)[+1](/course/odin-intermediate-html-and-css-grid)

### [The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](/course/odin-intermediate-html-and-css-grid)

Master 2D CSS Grid layouts, Subgrid, CSS Custom Properties, fluid clamp() typography, container queries, and zero-JS form validation with :user-valid.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/93736ccee5b8c088a202f319ce1223899a41f6bf-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[#Accessibility](/topic/a11y)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[+1](/course/odin-advanced-html-css-and-a11y)

### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y)

Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native <dialog> and Popover components.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/angularmaterial)

## Angular Material

4/81

### Section 1

- [1.1Firebase Project Hosting](/course/angularmaterial/lesson/firebase-project-hosting)
- [1.2Angular Material Router Outlet](/course/angularmaterial/lesson/angular-material-router-outlet)
- [1.3Firebase Authentication and Authorization](/course/angularmaterial/lesson/firebase-authentication-and-authorization)
- [1.4Angular Material Theming▶](/course/angularmaterial/lesson/angular-material-theming)
- [1.5Angular Material Dynamic Navigation using Firestore](/course/angularmaterial/lesson/angular-material-dynamic-navigation-using-firestore)
- [1.6Angular Material Forms from Firestore](/course/angularmaterial/lesson/angular-material-forms-from-firestore)
- [1.7Angular Material Reactive Forms Update Firestore](/course/angularmaterial/lesson/angular-material-reactive-forms-update-firestore)
- [1.8Angular Material Router Awareness](/course/angularmaterial/lesson/angular-material-router-awareness)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)