How to override color theme in Angular 19?

I'm setting up a project in Angular 19 where by default when installing @angular/material I kept azure-blue.css as theme. Now I want to override based on my colors. I've successfully overridden the primary color but can't override the accent or warn colors respectively.

I have used ng generate @angular/material:theme-color command to generate pallet by following this answer. I've created a sample stackblitz project where I was trying.

I tried to modify it in styles.scss by using the below code but getting error:

html {
@include mat.theme(
(
color: (
theme-type: light,
primary: palette.$primary-palette,
accent: palette.$tertiary-palette,
),
typography: (
plain-family: 'Arial, Helvetica, sans-serif',
),
)
);
}


Error:

X [ERROR] ($config has unexpected properties. Valid properties are theme-type, primary, tertiary, use-system-variables, system-variables-prefix. Found: accent)
╷
51 │ definition.define-colors($color));
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\@angular\material\core\tokens\_m3-system.scss 51:13 theme()
src\styles.scss 8:5 root stylesheet [plugin angular-sass]

angular:styles/global:styles:2:8:
2 │ @import 'src/styles.scss';
╵ ~~~~~~~~~~~~~~~~~


I understood the error but if I need to alter the accent or warn how this will happen?

Continue reading...