css Question posted in
Some basic documentation can be found here.

Angular material themes with css variables

I have in my project css variables like below:

:root {
  --color-primary: #65A518;
  --color-primary-hover: #558817;
  --color-primary-dark: #006729;
  --color-white: #FFFFFF;
}

but now I have to add angular material and custom themes.
I read that I need create my custom palette like below:

$custom-brand-primary: (
  50: '#edf3e7',
  100: '#d2e2c3',
  200: '#b4cf9c',
  300: '#95bc74',
  400: '#7fad56',
  500: $custom-primary,
  600: '#609732',
  700: '#558d2b',
  800: '#4b8324',
  900: '#3a7217',
  contrast: (
    50: $black,
    100: $black,
    200: $black,
    300: $black,
    400: $white,
    500: $white,
    600: $white,
    700: $white,
    800: $white,
    900: $white
  )
);

etc

and then in theme.css create custom palette.

So how to mix this approaches? and use css variables in angular material themes?
Is it good practise to mix it?

Tags:

2

Answers


  1. 0

    I really don’t want to say much since am not answering the question but truth is am finding it difficult to get my head around angular material theming especially customizing. There isn’t much out there that can help one.

    Login or Signup to reply.
  2. 0

    you are on the right track.
    I believe the next step would be to do the following:

    @use '@angular/material' as mat;
@include mat.core();

$app_theme: mat.define-light-theme(
    (
        color: (
            primary: $custom-brand-primary
         )
    )
);
@include mat.all-component-themes($app_theme);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search