Change CSS variables with 1 JavaScript line by SilvenLEAF

We know how to manipulate DOM or change CSS styles with JavaScript, but do you know how to change CSS variables with JavaScript? It's way easier than you can imagine.

SIMPLEST WAY TO CHANGE CSS VARIABLES

document.documentElement.style.setProperty('--yourVariableName', 'yourNewValue');

This above code will change the value of that CSS variables. So as a result, wherever you used this variable, the value will change there too.

[If you do not know what CSS variable is, see here
What is CSS Variable?
How to use CSS variable? ]

SIMPLEST WAY TO READ THE CURRENT VALUE OF ANY CSS VARIABLE

const value = getComputedStyle(document.documentElement).getPropertyValue('--yourVarialbeName');
console.log(value);

This code will get the current value of your variable and store it on value variable.

DEMO (PLAYTIME)

Let's create a CSS variable and use it in a lot of places

:root {
  --themeColor: red;
}

h1{
  color: var(--themeColor);
}
p{
  background-color: var(--themeColor);
}

Now use this variable to color a lot of your different elements. See how I used it to color the text color of h1 and background color of p.

Let's see what is the current value of --themeColor variable.

const value = getComputedStyle(document.documentElement).getPropertyValue('--themeColor');
console.log(value);

Let's change the value of --themeColor variable

Now let's use this code to change the --themeColor variable value from red to green.

document.documentElement.style.setProperty('--themeColor', 'green');

Now you'see wherever you used this variable, the value has changed too. I mean, h1 text color has become green and the background of p has also become green.

Easy right?

Try it yourself. Enjoy!!

If you have any questions or If you are stuck

Feel free to reach out to me. You can also contact me on LinkedIN https://www.linkedin.com/in/silvenleaf/ or on Twitter (as @silvenleaf ).

If you wanna know more about me, this is my portfolio website SilvenLEAF.github.io

I'd LOVE to be your friend, feel FREE to reach out to me!!

NEXT BLOG is coming on 12th Nov, 2020

on Create login signup system with Passport 1/3 (Series)

Next Blogs DATE

• Nov 12th, 14th, 16th 2020, Create login signup system with Passport (Series)

• Nov 18th 2020, How to create Login with Google

• Nov 20th 2020, How to create Login with Github

• Nov 22th 2020, How to create Login with LinkedIn

• Nov 24th 2020, How to create Login with Twitter

• Nov 26th, 28th, 30th 2020, Password Reset Series (with Node.js and React)

If this blog was helpful to you,

PLEASE give a LIKE and share,

It'd mean a lot to me. Thanks

Prev Blog

Role based User System (easiest explanation) (Pure JavaScript)

Next Blog

Create Signup/Login system (easiest method)