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';

$ng-io-accent: mat.define-palette(var(--blue-1), 700, 600, 800); is the correct syntax. If you put your css variable's definition inside the :root selector it should work — Jacopo Sciampi
– Jacopo Sciampi, Commented Mar 25, 2022 at 11:02

Mathew Berg · Accepted Answer · 2022-03-24 17:40:08Z

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);

answered Mar 24, 2022 at 17:40

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use angular material theme with css variables?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related