How to add extended colors on the latest angular material 19 theme

Question

I used the ng generate @angular/material:m3-theme to generate theme colors and apply it on style.scss but when I did this

style.scss

@use '@angular/material' as mat;
@use './_theme-colors.scss' as theme-colors;

html {
  color-scheme: light;
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$primary-palette,
        tertiary: theme-colors.$tertiary-palette,
        info: theme-colors.$info-palette,
        success: theme-colors.$success-palette,
        warning: theme-colors.$warning-palette,
      ),
      typography: Roboto,
      density: 0,
      high-contrast: high-contrast-overrides(light),
    )
  );
}

I got an error saying $config has unexpected properties. Valid properties are theme-type, primary, tertiary, use-system-variables, system-variables-prefix. Found: (info success warning). So I cant add new properties.

What is the right way to add new extended colors palette on the latest angular material 19?

Answer 1

I was able to solve this by first by modifying the auto generate theme by ng generate @angular/material:m3-theme adding the palette for info, success, and warning.

The $_palettes and $_rest was auto generated, you just need to add your palettes to $_palettes.

Then you just add export for $info-palette, $success-palette, $warning-pallete or whatever name you like.

$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
$info-palette: map.merge(map.get($_palettes, info), $_rest);
$success-palette: map.merge(map.get($_palettes, success), $_rest);
$warning-palette: map.merge(map.get($_palettes, warning), $_rest);

After that on your main theme.

html {
  color-scheme: light;
  @include mat.theme(
    (
      color: (
        /* these is the only property for setting the color palette for angular material 19 */
        primary: theme-colors.$primary-palette,
        tertiary: theme-colors.$tertiary-palette,
      ),
      typography: Roboto,
      density: 0,
      high-contrast: high-contrast-overrides(light),
    )
  );
}

And this is for the dark mode

.dark {
  color-scheme: dark;
  @include mat.theme(
    (
      high-contrast: high-contrast-overrides(dark),
    )
  );
}

Actually for the dark mode you just need to set the color-scheme: dark for it to work. I just included the high contrast.

Then to apply the info, success, and warning color palette, just create class to override the primary theme pallet.

This example gives me button with corresponding info, success, and warning.

.info {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$info-palette,
      ),
    )
  );

  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-primary),
      filled-label-text-color: var(--mat-sys-on-primary),
      outlined-outline-color: var(--mat-sys-primary),
      outlined-label-text-color: var(--mat-sys-primary-on),
      protected-container-color: var(--mat-sys-primary-container),
      protected-label-text-color: var(--mat-sys-primary-on-container),
    )
  );
}

.success {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$success-palette,
      ),
    )
  );

  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-primary),
      filled-label-text-color: var(--mat-sys-on-primary),
      outlined-outline-color: var(--mat-sys-primary),
      outlined-label-text-color: var(--mat-sys-primary-on),
      protected-container-color: var(--mat-sys-primary-container),
      protected-label-text-color: var(--mat-sys-primary-on-container),
    )
  );
}

.warning {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$warning-palette,
      ),
    )
  );

  @include mat.button-overrides(
    (
      filled-container-color: var(--mat-sys-primary),
      filled-label-text-color: var(--mat-sys-on-primary),
      outlined-outline-color: var(--mat-sys-primary),
      outlined-label-text-color: var(--mat-sys-primary-on),
      protected-container-color: var(--mat-sys-primary-container),
      protected-label-text-color: var(--mat-sys-primary-on-container),
    )
  );
}

Or if you happy with the color combination you can just do this

.info {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$info-palette,
      ),
    )
  );
}

.success {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$success-palette,
      ),
    )
  );
}

.warning {
  @include mat.theme(
    (
      color: (
        primary: theme-colors.$warning-palette,
      ),
    )
  );
}

Then you can just use it like this.

<button mat-raised-button class="info">Info Button</button>
<button mat-raised-button class="success">Success Button</button>
<button mat-raised-button class="warning">Warning Button</button>