Angular Material 18 (Material 3) Custom Theme: Only Primary Color Applies

[DvirMon]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Angular Material 17 (Material 2)

Description

I'm encountering an issue where only the primary color is applied when using custom themes in Angular Material 18.

However, this issue does not occur when using pre-built themes from @angular/material/prebuilt-themes (e.g., magenta-violet.css). The pre-built theme's accent and warn colors are applied correctly in those cases.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-g9u5la

Steps to reproduce:

1. Create a new Angular project or use an existing one:

   • If creating a new project, run: ng new color-theme-issue
   • Navigate to the project directory: cd color-theme-issue

2. Install Angular Material 18:

   • Run: ng add @angular/material
   • Choose custom theme

3. Define custom themes in a Sass file (e.g., styles.scss):

      @use "@angular/material" as mat;
   
      @include mat.core();
   
       $theme: mat.define-theme(
       (
          color: (
              theme-type: dark,
              primary: mat.$violet-palette,
                    ),
    .                   ..
             )
         )
   
     :root {
         @include mat.all-component-themes($theme);
         }
   

4. Use Angular Material components in your template:

   <button mat-flat-button>This should use the primary color</button>
   <button mat-flat-button class="mat-button-accent">This should use the accent color (not visible)</button>
   <button mat-flat-button class="mat-button-warn">This should use the warn color (not visible)</button>

Expected Behavior

All colors defined in a custom theme should be applied correctly to the Angular Material components, just like when using the pre-built themes from @angular/material/prebuilt-themes.

Actual Behavior

Only the primary color is reflected. The accent and warn colors are not visible in the components.

Environment

Angular CLI: 18.0.2
Node: 20.11.1
Package Manager: npm 10.2.4
OS: linux x64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cli 18.0.2
@schematics/angular 18.0.2
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6

[elmordo]

Hi @DvirMon

I faced the same issue and after inspecting the material theme source ( for example this: https://github.com/angular/components/blob/main/src/material/core/theming/prebuilt/azure-blue.scss ) I found solution for this.

Add @include mat.color-variants-backwards-compatibility($theme); line at the end of your styles.scss and this should fix the colors.

Your styles.scss will be looks like this:

   @use "@angular/material" as mat;

   @include mat.core();

    $theme: mat.define-theme(
    (
       color: (
           theme-type: dark,
           primary: mat.$violet-palette,
                 ),
 .                   ..
          )
      )

  :root {
      @include mat.all-component-themes($theme);
      }

  @include mat.color-variants-backwards-compatibility($theme);
  @include mat.typography-hierarchy($theme);  // typography styles could be included too

I hope this helps.

[ct5845]

Anyone know what "forwards" compatibility for colouring (in general, particularly buttons!!) is going to be?

Obviously this is using the MD2; primary, accent, warn ThemePalette, which is different to MD3.

Would rather "do this right" as started with MD3, then introducing tech debt.

[daemons88]

I Create a new project in Angular 8 (and add material packages)
ng new theme-material-test

then run:
ng generate @angular/material:m3-theme

I put the colors, Primary, secondary and tertiary:

which created the page with the different themes, but without applying them, so I added this, as mentioned above:

:root {
@include mat.all-component-themes($light-theme);
}

@include mat.color-variants-backwards-compatibility($light-theme);
@include mat.typography-hierarchy($light-theme);

and even so, the colors I set in the theme are not applied correctly:
HTML (copy from angular material page):

<main class="main">
  <div class="content">
    <h1>Hello, {{ title }}</h1>
      <p>Congratulations! Your app is running. 🎉</p>
      <div>
        <button mat-raised-button>Basic</button>
        <button mat-raised-button color="primary">Primary</button>
        <button mat-raised-button color="accent">Accent</button>
        <button mat-raised-button color="warn">Warn</button>
        <button mat-raised-button disabled>Disabled</button>
        <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
      </div>
  </div>
</main>

It doesn't look like that is working at 100% or I'm missing something.

[andrewseguin]

The color input is no longer used for M3. Instead, you can create your own theme for different variants. For more on this, see https://material.angular.io/guide/theming#using-component-color-variants

[ct5845]

The color input is no longer used for M3. Instead, you can create your own theme for different variants. For more on this, see https://material.angular.io/guide/theming#using-component-color-variants

Think this page needs to be far more prominent WRT Angular Material now, as all the library of components still display these colours, but don't cite (at least not easily!!) that they're only working via a backwards compatibility fix, and that probably for allot of users they're going to have to bring in more scss then previous.

I get it... I think.. I don't really, we've set-up the palette using the MD3 palettes (so I've given material.. primary, secondary, tertiary, error).. so what have i done that for?... can see most Angular Material users are going to be replicating incredibly similar scss updates e.g. for an error/warn button now, and of course with varying success, having to really tightly couple these and rely on the classes angular material provides, which from bitter experience are incredibly prone to changing/breaking (not to mention a PITA to get right for precedence), whilst my primary buttons and accent buttons have largely stayed intact!.

anyway... yer seems odd to me, only styles at the end of the day, but feels like an unnecessary barrier to entry.

[IgorKurkov]

The color input is no longer used for M3

even now Angular Material docs contain buttons with color="" inputs. Is it a sort of mistake?

@andrewseguin is it mean we should use only classes definitions on mat components?

may I ask you about a viable example for a case when we have a custom theme with more than 3 palettes?

As far as get-color-from-palette has been removed we should have the ability somehow to extend the theme with custom color-palette names, sometimes we have not primary, tertiary, neutral-variant or whatever, but just straight - primary, accent, warning, success, error, good, bad etc.

So previously it was possible to have custom palette maps, currently if we want to migrate to M3 properly, it requires changing palettes' mapping and theme usage.

[JGSolutions]

When i tried using secondary color doesn't apply. For some reason even if i set it to primary it's always rendering my tertiary color

`@use '@angular/material' as mat;

$theme: mat.define-theme();

.tertiary-checkbox {
@include mat.checkbox-color($theme, $color-variant: secondary); <----- does not work
}`

[sonphnt]

I still dont get it with this MD3. I have 3 different colors primary, secondary, and tertiary. I want those colors visualized exactly on components such as button, icon but they seem to be not working properly, either the color is too bright or dark compared to my base color.

[Biokimist]

I don't know maybe Material is way better... But it feel uselessly complexe compare to color attribute. should i create a directive 'color' to factorize my code and get the simple system we use to have ?

[mugifly]

The color input is no longer used for M3. Instead, you can create your own theme for different variants. For more on this, see https://material.angular.io/guide/theming#using-component-color-variants

Is it correct to define styles like follows? It definitely works, but it seems redundant.

.primary-badge {
  @include mat.badge-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-badge {
  @include mat.badge-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-badge {
  @include mat.badge-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-badge {
  @include mat.badge-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-button {
  @include mat.button-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-button {
  @include mat.button-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-button {
  @include mat.button-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-button {
  @include mat.button-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-checkbox {
  @include mat.checkbox-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-checkbox {
  @include mat.checkbox-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-checkbox {
  @include mat.checkbox-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-checkbox {
  @include mat.checkbox-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-chips {
  @include mat.chips-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-chips {
  @include mat.chips-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-chips {
  @include mat.chips-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-chips {
  @include mat.chips-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-datepicker {
  @include mat.datepicker-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-datepicker {
  @include mat.datepicker-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-datepicker {
  @include mat.datepicker-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-datepicker {
  @include mat.datepicker-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-fab {
  @include mat.fab-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-fab {
  @include mat.fab-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-fab {
  @include mat.fab-color(m3-theme.$light-theme, $color-variant: tertiary);
}

.primary-form-field {
  @include mat.form-field-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-form-field {
  @include mat.form-field-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-form-field {
  @include mat.form-field-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-form-field {
  @include mat.form-field-color(m3-theme.$light-theme, $color-variant: error);
}

.surface-icon {
  @include mat.icon-color(m3-theme.$light-theme, $color-variant: surface);
}
.primary-icon {
  @include mat.icon-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-icon {
  @include mat.icon-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-icon {
  @include mat.icon-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-icon {
  @include mat.icon-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-option {
  @include mat.option-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-option {
  @include mat.option-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-option {
  @include mat.option-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-option {
  @include mat.option-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-progress-bar {
  @include mat.progress-bar-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-progress-bar {
  @include mat.progress-bar-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-progress-bar {
  @include mat.progress-bar-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-progress-bar {
  @include mat.progress-bar-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-progress-spinner {
  @include mat.progress-spinner-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-progress-spinner {
  @include mat.progress-spinner-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-progress-spinner {
  @include mat.progress-spinner-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-progress-spinner {
  @include mat.progress-spinner-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-pseudo-checkbox {
  @include mat.pseudo-checkbox-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-pseudo-checkbox {
  @include mat.pseudo-checkbox-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-pseudo-checkbox {
  @include mat.pseudo-checkbox-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-pseudo-checkbox {
  @include mat.pseudo-checkbox-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-radio {
  @include mat.radio-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-radio {
  @include mat.radio-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-radio {
  @include mat.radio-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-radio {
  @include mat.radio-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-select {
  @include mat.select-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-select {
  @include mat.select-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-select {
  @include mat.select-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-select {
  @include mat.select-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-slide-toggle {
  @include mat.slide-toggle-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-slide-toggle {
  @include mat.slide-toggle-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-slide-toggle {
  @include mat.slide-toggle-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-slide-toggle {
  @include mat.slide-toggle-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-slider {
  @include mat.slider-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-slider {
  @include mat.slider-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-slider {
  @include mat.slider-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-slider {
  @include mat.slider-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-stepper {
  @include mat.stepper-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-stepper {
  @include mat.stepper-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-stepper {
  @include mat.stepper-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-stepper {
  @include mat.stepper-color(m3-theme.$light-theme, $color-variant: error);
}

.primary-tabs {
  @include mat.tabs-color(m3-theme.$light-theme, $color-variant: primary);
}
.secondary-tabs {
  @include mat.tabs-color(m3-theme.$light-theme, $color-variant: secondary);
}
.tertiary-tabs {
  @include mat.tabs-color(m3-theme.$light-theme, $color-variant: tertiary);
}
.error-tabs {
  @include mat.tabs-color(m3-theme.$light-theme, $color-variant: error);
}

[markusahrweileramcon]

imho, this snippet should be included in the component themes

[zygarios]

Defining color variants is definitely overcomplicated. Why is it so weird and uncomfortable to use in m3?

[josegomez]

This is absurd, the old way of using color input was easy. This new way doesn't seem to work at all most of the times. Why are we reverting?