Angular use CSS variable in global style.css file

Question

How to use CSS variable in global CSS file

Just check style.css file in stackblitz

You have a variable in a typescript class and you want to use that variable in CSS to change the styles? Please correct me if I am wrong. — Mukesh Kumar, Nov 15 '18 at 09:05
CSS variable works inside component but i'm not able to use that in styles.css file — ksh, Nov 15 '18 at 09:08

score 8 · Answer 1 · answered Dec 26 '18 at 17:36

in the global css file, styles.css, I have this code:

import ...

:root {
    --main-color: #3f51b5;
}

it declares a css variable, "main-color"

then in the child component css file, I can use the variable directly

#component-body {
  background: var(--main-color);
}

score 8 · Answer 2 · answered Apr 28 '19 at 01:55

In the global style.css file, define custom properties in a :root selector.

Global variables in CSS will enable us to define theme variables such that multiple components can use the same.

Here you go:

app/style.css

:root {
  --primary-color: #fff;
  --background-color: #e5e5e5;
  --text-color: #2d2d2d;
}

To define a CSS custom property,prefix the property with two '--' like --text-color:#2d2d2d.

Now we can reference the variable in other CSS files.To use a custom property, use the var keyword to pass in a reference to the custom property.

app/header/header.component.css

:host {
background-color: var(--primary-color);
color: var(--text-color);
}

2 Answers2