Angular material Custom theme not working in angular 18

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>

Continue reading...