How to use angular material theme with css variables?

Question

How to theme angular material with css variables?

Is it possible to pass --blue-1: #228be6 variable to be used as $ng-io-accent?

@use '@angular/material' as mat;

$ng-io-primary: mat.define-palette(mat.$blue-palette, 700, 600, 800);
$ng-io-accent: mat.define-palette(mat.$red-palette, 700, 600, 800);
$ng-io-warn: mat.define-palette(mat.$red-palette);
$ng-io-theme: mat.define-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);

@include mat.all-component-themes($ng-io-theme);
@include app-theme.theme($ng-io-theme);

I have tried those but they not work. I got compile error.

$ng-io-accent: mat.define-palette('--blue-1', 700, 600, 800);

$ng-io-accent: mat.define-palette('blue', 700, 600, 800);

$ng-io-accent: '--blue-1';

Answer 1

You can create your own palette (It's not a single color like what you have):

https://material.angular.io/guide/theming#palettes

Here is what one would look like, you can define every color and then pass the pallette you've created through. Something like this maybe:

$my-own-pallette: (
  50: var(--blue-1),
  100: ...,
  ...
)

And then you can use it:

$ng-io-accent: mat.define-palette($my-own-pallette, 700, 600, 800);