Angular Material Theming System - Adding More Colors

Colors in M3 Theme

In Angular Material, the colors are defined using the Material Design 3 (M3) theme. The M3 theme is mainly generated using a single color, called the primary color. So, ideally you get only one color (and it’s tones) from the theme.

Tailwind Like Colors

Tailwind provides default color palettes, and you can use them easily like bg-blue-500, border-blue-900 or text-blue-200.

Let’s see how we can achieve this in Angular Material. Our goal is to generate classes from blue-50 to blue-950. Each single class will take care of background and foreground colors.

1. Blue color palette

Let’s take below palette as an example:

1
$blue-palette: (
2
  50: #eff6ff,
3
  100: #dbeafe,
4
  200: #bfdbfe,
5
  300: #93c5fd,
6
  400: #60a5fa,
7
  500: #3b82f6,
8
  600: #2563eb,
9
  700: #1d4ed8,
10
  800: #1e40af,
11
  900: #1e3a8a,
12
  950: #172554,
13
);

2. Add contrast palette

1
$blue-palette: (
2
  50: #eff6ff,
3
  100: #dbeafe,
4
  200: #bfdbfe,
5
  300: #93c5fd,
6
  400: #60a5fa,
7
  500: #3b82f6,
8
  600: #2563eb,
9
  700: #1d4ed8,
10
  800: #1e40af,
11
  900: #1e3a8a,
12
  950: #172554,
13
  contrast: (
14
    50: #000000,
15
    100: #000000,
16
    200: #000000,
17
    300: #000000,
18
    400: #000000,
19
    500: #ffffff,
20
    600: #ffffff,
21
    700: #ffffff,
22
    800: #ffffff,
23
    900: #ffffff,
24
    950: #ffffff,
25
  ),
26
);

3. Create palette barrel file

Create a file at src/styles/palettes/_index.scss and export each palette as theme:

1
@use "sass:map";
2
@use "@angular/material" as mat;
3

4
$blue-palette: (/* created in previous step */);
5

6
@each $color in (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) {
7
  .blue-#{$color} {
8
    @include mat.theme-overrides(
9
      (
10
        primary: map.get($blue-palette, $color),
11
        on-primary: map.get($blue-palette, "contrast", $color),
12
      )
13
    );
14
  }
15
}

Note that as we are only targeting buttons, we are only overriding primary and on-primary colors here. You can override other system variables as needed and refer to below table for default variants for components:

Component	Default color variant
Badge	`error`
Button	`primary`
Button-toggle	`secondary`
Checkbox	`primary`
Chips	`secondary`
Datepicker	`primary`
Fab	`primary`
Form-field	`primary`
Icon	`surface`
Option	`secondary`
Progress-bar	`primary`
Progress-spinner	`primary`
Pseudo-checkbox	`primary`
Radio	`primary`
Select	`primary`
Slide-toggle	`primary`
Slider	`primary`
Stepper	`primary`
Tabs	`primary`