Angular Material Theme not wroking after update from 14 to 15

2.1k views Asked by At

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

enter image description here

enter image description here

CSS Variables set properly but when I get it to create a color palette it shows this is not a color.

0

There are 0 answers