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
– Mukesh Kumar, Commented Nov 15, 2018 at 9:05
CSS variable works inside component but i'm not able to use that in styles.css file — ksh
– ksh, Commented Nov 15, 2018 at 9:08

Henry · Accepted Answer · 2018-12-26 17:36:59Z

10

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

answered Dec 26, 2018 at 17:36

Henry

1519 bronze badges

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

Comments

Himanshu Arora · Accepted Answer · 2019-04-28 01:55:56Z

9

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

answered Apr 28, 2019 at 1:55

Himanshu Arora

6981 gold badge9 silver badges21 bronze badges