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?

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?

• angular
• sass
• material-ui
• angular-material
• material-design

• @BalkishanDhaker it doesnt even answer the question on that video – zer09 Commented Feb 16 at 12:16
• I have checked with the documentation so that suggests to create a custom pallet and use that to define colors, but it does not mention how to add new custom colors to that theme. i think the named colors will not be added, it will only allow to create custom pallete your custom colors and that you can assign to the theme. Read this once: angular-material.dev/articles/… – Balkishan Dhaker Commented Feb 16 at 12:28
• @BalkishanDhaker you just spamming your content – zer09 Commented Feb 16 at 14:29

1 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>