How to apply secondary or tertiary colors to Angular Material components with M3 theme?

Описание: Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!How to apply secondary or tertiary colors to Angular Material components with M3 theme?

I am currently discovering Angular Material v18+ with the M3 theming specification. Using the following schematic that I found in the documentation, I have generated a custom theme including custom color palettes.
ng generate @angular/material:m3-theme

ng generate @angular/material:m3-theme

This left me with a file that contains the following code in the m3-theme.scss file:
@use 'sass:map';
@use '@angular/material' as mat;

$_palettes: (
primary: (
// ...
),
secondary: (
// ...
),
tertiary: (
// ...
),
neutral: (
// ...
),
neutral-variant: (
// ...
),
error: (
// ...
),
);

$_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,
),
));

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

$_palettes: (
primary: (
// ...
),
secondary: (
// ...
),
tertiary: (
// ...
),
neutral: (
// ...
),
neutral-variant: (
// ...
),
error: (
// ...
),
);

$_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,
),
));

I have included the generated theme in the styles.scss file like that:
@use '@angular/material' as mat;
@use '../m3-theme.scss' as customPalette;

@include mat.core();

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


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

@use '@angular/material' as mat;
@use '../m3-theme.scss' as customPalette;

@include mat.core();

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


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

When I was building a little demo-app with some components, I have noticed that only the primary color would be used in the app - I could neither find the secondary, nor the tertiary color applied to any of my components.
Is there any way to apply the secondary or tertiary color to a Angular Material component? As for example, if i wanted to dye the background-color of this button in my secondary color:
button mat-flat-button
mat-icon favorite /mat-icon
Hello World!
/button

button mat-flat-button
mat-icon favorite /mat-icon
Hello World!
/button

I have already tried adding the color-attribute with an according value to the HTML-Tag, as for example:
button mat-flat-button color="tertiary"
mat-icon favorite /mat-icon
HelSource of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/