Angular 9 - Cannot change body background with css variable

Question

I am using custom color variables in order to change button colors and it is working fine. I am using elementRef.

Problem is when I try to change body background color, even when I point to the variable, body is still taking default color.

   :root{
 --body-background-color: #f7b219;
}

body,

html{
  background-color: var(--body-background-color) !important;
}

Where am I wrong?

avia · Accepted Answer · 2020-09-08 17:44:05Z

1

Try

:root {
  --main-bg-color: #f7b219;
}

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

answered Sep 8, 2020 at 17:44

avia

1,5939 silver badges21 bronze badges

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

5 Comments

avia Over a year ago

More relevant on using CSS variables here developer.mozilla.org/en-US/docs/Web/CSS/var

99Coder Over a year ago

Yes, I have just like that in my code but it is still using default value.

avia Over a year ago

OK. Can I see more of your code? Is the webpage live on internet that I could check it? Or also, apart from Angular are you using other libraries/frameworks that could be overriding this custom CSS? Because that code is 100% valid, that I am sure.

99Coder Over a year ago

Yes, you were right!! I had a syntax problem in my code... Thanx!

avia Over a year ago

Glad I could help!

Collectives™ on Stack Overflow

Angular 9 - Cannot change body background with css variable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related