setting accent and warn color for button, Angular material 18

I want to set warn and accent color of mat-button, I am unable to do so. Found some code on internet, but not working.

$myapp-theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.m2-define-palette(mat.$m2-indigo-palette);
$myapp-theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$myapp-theme: mat.define-theme((
color: (
theme-type: light,
primary: $myapp-theme-primary,
accent: $myapp-theme-accent,
warn: $myapp-theme-warn,
)
));


Please help

m3-theme.scss

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

// Note: Color palettes are generated from primary: #7DFA90, secondary: #7DFA90, tertiary: #7DFABA
$_palettes: (
primary: (
0: #000000,
10: #002108,
20: #003912,
),
secondary: (
0: #000000,
10: #002108,
20: #003912,
),
tertiary: (
0: #000000,
10: #002112,
20: #003822,
),
neutral: (
0: #000000,
10: #1a1c19,
20: #2f312d,
),
neutral-variant: (
0: #000000,
10: #171d16,
20: #2b322b,
),
error: (
0: #000000,
10: #410002,
20: #690005,
),
);

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

$_custom: map.merge(map.get($_palettes, primary), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
use-system-variables: true,
),
typography: (
use-system-variables: true,
),
));


Using it in styles .scss like this

@use './m3-theme';
.tertiary-checkbox {
@include mat.button-color(m3-theme.$light-theme, $color-variant: primary)
}

Continue reading...