Can anyone help me to understand what happened with my theme when I am update Angular & Angular Material from 14 to 15. The way I am using to create theme in Angular Material 14 I use the same way to create theme in Angular Material 15 with some changes and it get errors.
When I write hex or rgb color code instead of css var it works fine.
_variables.scss
:root {
//Primary Color
--primary-color: 39 84 186;
--primary-lighter-color: 190 204 234;
--primary-darker-color: 23 58 163;
//Accent Color
--accent-color: 255 200 69;
--accent-lighter-color: 255 239 199;
--accent-darker-color: 255 180 46;
//Warn Color
--warn-color: 248 90 64;
--warn-lighter-color: 253 206 198;
--warn-darker-color: 245 63 42;
}
styles.scss
@use '@angular/material' as mat;
@import './styles/variables';
@include mat.core();
$my-primary: mat.define-palette((
100: rgb(var(--primary-color)),
500: rgb(var(--primary-color)),
700: rgb(var(--primary-color)),
contrast: (
100: #fff,
500: #fff,
700: #000,
)
));
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
),
typography: mat.define-typography-config(),
density: 0,
));
@include mat.all-component-themes($my-theme)
the errors what I get
CSS Variables set properly but when I get it to create a color palette it shows this is not a color.