Modify Angular Material 19 Theme with SCSS & CSS

In this quick guide, we will learn how to modify theme for Angular Material 19 with SCSS mixins and CSS variables.

If you like watching videos, you can watch the video version of this article on YouTube.

Creating Project with Angular Material 19

Let's start by creating a new Angular project with Angular Material 19.

npm i -g @angular/cli@19
ng new angular-material-19-theming --style scss --skip-tests --defaults
cd angular-material-19-theming
ng add @angular/material@19

And select answers as below:

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations

Generate demo components

ng generate @angular/material:navigation navigation
ng generate @angular/material:dashboard dashboard
ng generate @angular/material:address-form address-form
ng generate @angular/material:table table

Add ng-content in navigation component

Add slide toggle in toolbar

<p class="theme-toggle">
    <mat-icon>light_mode</mat-icon>
    <mat-slide-toggle (change)="onThemeChange($event)"></mat-slide-toggle>
    <mat-icon>dark_mode</mat-icon>
</p>

.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

Add dark class in body when toggle changes

onThemeChange(event: MatSlideToggleChange) {
    this.document.body.classList.toggle('dark');
}

Import everything in App component

<app-navigation>
  <app-dashboard></app-dashboard>
  <app-address-form></app-address-form>
  <app-table></app-table>
</app-navigation>

The new theme mixin

Take a look at src/styles.scss. Notice the usage of mat.theme function:

@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

The mat.theme mixin takes a map that defines color, typography, and density values and outputs a set of CSS variables that control the component appearance and layout. These variables are based on Design Tokens.

The color variables are defined using the CSS color function light-dark so that your theme can switch between light and dark mode using the CSS property color-scheme.

The mat.theme mixin will only declare CSS variables for the categories included in the input. For example, if typography is not defined, then typography CSS variables will not be included in the output.

Color Palettes

Angular Material provides twelve prebuilt color palettes that can be used for your application’s theme.

To create a custom color palettes, we can use palette generation schematic. It builds custom color palettes based on a single color input for the primary color, and optionally color inputs to further customize secondary, tertiary, and neutral palettes:

ng generate @angular/material:theme-color

And select answers as below:

Index	Question	Answer
1	What HEX color should be used to generate the M3 theme? It will represent your primary color palette.	#6750a4
2	What HEX color should be used represent the secondary color palette?	Leave blank
3	What HEX color should be used represent the tertiary color palette?	Leave blank
4	What HEX color should be used represent the neutral color palette?	Leave blank
5	What is the directory you want to place the generated theme file in?	src/styles/

The schematic will generate an SCSS file named _theme-colors.scss. Let's use $primary-palette and $tertiary-palette to modify the theme.

@use "./styles/_theme-colors.scss" as theme-colors;

html {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$primary-palette,
        tertiary: theme-colors.$tertiary-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

You should see the new theme applied to the application.

System Variables

The CSS variables generated by the mat.theme mixin are also known as System Variables.

For this article, we will focus on the color variables. Angular Material 19 mainly depends on below color variables:

Index	Color	Variable
1	Primary	--mat-sys-primary, --mat-sys-on-primary
2	Surface	--mat-sys-surface, --mat-sys-on-surface
3	Error	--mat-sys-error, --mat-sys-on-error
4	Outline	--mat-sys-outline, --mat-sys-outline-variant

Default colors for body

Let's apply some default background and font colors to our body so that it aligns with material theme.

// styles.scss
body {
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

Modifying System Variables

We saw that mat.theme mixin generates system variables so it's pretty clear that we can also modify this variables so that we can achieve theme customizations. For example what we will do, we will comment out the color configuration so that it does not generate any system variables and then we will give our custom values for primary system variables and we will see how it gets applied to the components.

First of all let's comment out this color map and add mat-sys-primary and mat-sys-on-primary variables and give any values any valid color values.

// styles.scss
html {
  @include mat.theme((
    // color: (
    //   theme-type: light,
    //   primary: mat.$azure-palette,
    //   tertiary: mat.$blue-palette,
    // ),
    typography: Roboto,
    density: 0,
  ));

  --mat-sys-primary: #6750a4;
  --mat-sys-on-primary: #ffffff;
}

You should see the new primary color applied to the application. Don't forget to undo this changes when you are done.

One more and recommended way to modify the theme is to use the overrides mixin.

Overrides mixin

The mat.theme mixin is used to generate the theme. But if you want to override the system variables, you can use the mat.theme-overrides mixin.

For example let's change the primary color of the toggle slide:

// navigation.component.scss
@use "./styles/_theme-colors.scss" as theme-colors;

// rest remains same

.theme-toggle {
  @include mat.theme-overrides((
    primary: red,
    on-primary: yellow
  ))
}

Using Theme Builder

You can also use Theme Builder to get the tokens for your desired theme.

What is it?

Theme builder is a tool for Angular developers who are using Angular Material 15, 16, 17, 18 or 19 in their project. This tool allows you to build, preview and export themes for Angular Material.

You can also share themes simply by using a unique link with your team of developers or designers.

How to use it?

1. Simply go to themes.angular-material.dev
2. Select seed colors to generate Material theme
3. Check generated theme and change them as needed
4. Export theme to get the tokens
   1. Copy and paste the tokens in a file, say tokens.scss or tokens.css. Make sure to adjust the :root, :host selector as needed.
   2. Add path/to/tokens.scss or path/to/tokens.css in your angular.json's styles array, after Angular Material's theme file.
   3. Simply add .dark to html or body element to apply dark theme.

Conclusion

In this article, we started by creating a new Angular project with Angular Material 19. Then, we learned how to create a custom theme using mat.theme mixin. We also learned how to create custom color palettes using mat.theme-color schematic. Then, we learned how to override the theme for a specific component using mat.theme-overrides mixin. Finally, we learned how to modify the theme using CSS variables.

And lastly, we learned how to use Theme Builder to get the tokens for your desired theme.

Live Playground

stackblitz.com

Looking for more?

If you are looking for more advanced topics, I am soon going to release a new course on Angular UI, make sure to subscribe to the newsletter to get notified when it is ready.