0

I have the following setup:

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme(
  (
      color: (
          primary: $my-primary,
          accent: $my-accent,
          warn: $my-warn
     ),
     density: 0
  )
);

@include mat.core-theme($my-theme);

:root {
   --my-warn: ....????
}

At the end I would like to set a css variable holding the warn color. I guess there are 2 ways to do this, one is just using $my-warn and the other is using $my-theme

So I tried:

$config: mat.get-color-config($my-theme);
$warn: map-get($config, "warn");
:root {
    --my-warn: #{$warn};
}

This gives an sass error: SassError: (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #...

It seems that $warn is still a whole palette. Any suggestions what I'm doing wrong here?

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
  • 1
    `mat-color($warn, 700)` etc? From https://stackoverflow.com/questions/49642098/angular-material-global-color-variables – Andrew Allen Aug 14 '23 at 11:48
  • 1
    Thanks. I think `mat-color` is and old syntax. I got it working with `mat.get-color-from-palette($my-warn, 700)`. To get the `warn` palette` from the theme use `map.get($theme, 'warn')` and make sure to add on the top`@use sass:map;` – Jeanluca Scaljeri Aug 14 '23 at 12:52

0 Answers0