Angular material Custom theme not working in angular 18

Question

While installing the material module the default theme was added as below

        "styles": [
          "@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss"
        ],

Using the reference https://material.angular.io/guide/theming

ng generate @angular/material:m3-theme

A custom theme was created as below

// This file was generated by running 'ng generate @angular/material:m3-theme'. // Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #a78bfa, secondary: #e6e6e6
$_palettes: (
  primary: (
    0: #000000,
    10: #21005e,
    20: #381385,
    25: #432390,
    30: #4f319c,
    35: #5b3ea8,
    40: #674bb5,
    50: #8065d0,
    60: #9b7fed,
    70: #b59cff,
    80: #cebdff,
    90: #e8ddff,
    95: #f5eeff,
    98: #fdf7ff,
    99: #fffbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #001f24,
    20: #00363d,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    90: #97f0ff,
    95: #d0f8ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #31101e,
    20: #492533,
    25: #56303e,
    30: #633b49,
    35: #704655,
    40: #7d5261,
    50: #996a79,
    60: #b58393,
    70: #d19dad,
    80: #efb8c9,
    90: #ffd9e3,
    95: #ffecf0,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #1c1b1e,
    20: #313033,
    25: #3d3b3e,
    30: #48464a,
    35: #545156,
    40: #605d62,
    50: #79767a,
    60: #938f94,
    70: #aeaaae,
    80: #cac5ca,
    90: #e6e1e6,
    95: #f4eff4,
    98: #fdf8fd,
    99: #fffbff,
    100: #ffffff,
    4: #0f0e11,
    6: #141316,
    12: #201f23,
    17: #2b292d,
    22: #363438,
    24: #3a383c,
    87: #ddd8dd,
    92: #ece7eb,
    94: #f1ecf1,
    96: #f7f2f7,
  ),
  neutral-variant: (
    0: #000000,
    10: #1d1a22,
    20: #322f38,
    25: #3d3a43,
    30: #48454e,
    35: #54515a,
    40: #605d66,
    50: #79757f,
    60: #938f99,
    70: #aea9b4,
    80: #cac4cf,
    90: #e6e0ec,
    95: #f5eefa,
    98: #fdf7ff,
    99: #fffbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));

Included the theme in the style.scss file

@use './m3-theme' as customTheme;
@use '@angular/material' as mat;
@include mat.core();

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  // Apply the light theme by default
  @include mat.core-theme(customTheme.$light-theme);
}

However, still not working getting the default theme

The toolbar is using the color primary

<mat-toolbar color="primary">
  
</mat-toolbar>

Answer 1

The reason is, adding the color="primary" attribute to <mat-toolbar> is no longer supported by the material 3 version of theming. Adding color variants via attributes no longer works for all components which used to use them. Per the API doc for the toolbar:

 @Input()

color: string | null
    

Theme color of the toolbar. This API is supported in M2 themes only, it has no effect in M3 themes.

You will need to add a custom class in a mixin (globally) or in the components style file (encapsulated). So in this case, if lets say we want to have a global class which adds the primary color from our theme and adds that color as the background color and its contrast color as the text color; We could add a mixin which contains this global class:

/app/styles/mixins/_global-styles.scss // make sure to make mixins sass partials by starting the file name with an underscore

@use '@angular/material' as mat;

@mixin global-styles-theme($theme) {
  $primary: mat.get-theme-color($theme, primary);
  $on-primary: mat.get-theme-color($theme, on-primary); // make sure to include mat.system-level-colors(theme.$light-theme) in your styles.scss for this to work

  // add global styles here
  .primary {
    background: $primary;
    color: $on-primary;
  }
}

Then in your styles.scss you would include this mixin along with all your other theme initialization methods:

src/styles.scss

@use '@angular/material' as mat;
@use './app/styles/theme' as theme;
@use './app/styles/mixins/global-styles' as gs;
@include mat.core;

html {
  @include mat.core-theme(theme.$light-theme);
  @include mat.all-component-themes(theme.$light-theme);
  @include mat.system-level-colors(
    theme.$light-theme
  );
  @include gs.global-styles-theme(theme.$light-theme);
}

now in your component template, give this class to whatever you want to have a primary background and the correct contrasting text color:

<mat-toolbar class="primary"></mat-toolbar>

for more info check out these docs, which also describes how to do color variants for other components: https://material.angular.io/guide/theming#using-component-color-variants.