Change CSS variables with 1 JavaScript line by SilvenLEAF
Tags: javascript, react, angular, silvenleaf
Published: 2020-11-11 04:31:12

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
```javascipt
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
<a href="https://youtu.be/8Yum7EQgadM">What is CSS Variable? </a>
<a href="https://youtu.be/BQEo8uPGFPE">How to use CSS variable? </a>]

#### SIMPLEST WAY TO READ THE CURRENT VALUE OF ANY CSS VARIABLE
```javascript
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
```css
: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.
```javascript
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.
```javascipt
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 <a href="https://www.linkedin.com/in/silvenleaf/">https://www.linkedin.com/in/silvenleaf/</a> or on Twitter (as @SilvenLEAF).

If you wanna know more about me, this is my portfolio website <a href=" https://SilvenLEAF.github.io">SilvenLEAF.github.io</a>

#### 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
<a href="https://dev.to/silvenleaf/role-based-auth-easiest-explanation-javascript-by-silvenleaf-4pdb">
Role based User System (easiest explanation) (Pure JavaScript)
</a>

# Next Blog
<a href="https://dev.to/silvenleaf/create-signup-login-system-easiest-method-by-silvenleaf-21b5">
Create Signup/Login system (easiest method)
</a>