CSS variables, also known as custom properties, are powerful. They let you store values and reuse them. With JavaScript, you can change these values dynamically. This gives you control over styles at runtime.

In this article, you will learn how to set CSS variables with JavaScript. We will cover the setProperty() method. You will see real examples and code. This guide is perfect for beginners.

What Are CSS Variables?

CSS variables hold values like colors, sizes, or fonts. You define them with two dashes (--). For example, --main-color: blue;. You use them with the var() function.

They make your code cleaner. You change one value, and it updates everywhere. But sometimes, you need to update them with JavaScript. That is where setProperty() comes in.

Before diving in, it helps to understand how JavaScript Variables work. Check out our Types of JavaScript Variables guide for a refresher.

The setProperty() Method

The setProperty() method is part of the CSSStyleDeclaration interface. It sets a CSS property on an element. You use it on the style property of a DOM element.

Syntax: element.style.setProperty(propertyName, value, priority). The priority is optional. Usually, you pass an empty string or null.

For CSS variables, the property name includes the two dashes. For example, --bg-color. The value is a string like 'red'.

Setting CSS Variables on the Root Element

The root element (:root) is where global CSS variables live. To change them, target the document.documentElement. This is the element.

 
// Get the root element
const root = document.documentElement;

// Set a CSS variable
root.style.setProperty('--main-bg', 'lightblue');

// Check the new value
console.log(root.style.getPropertyValue('--main-bg'));

This changes the background color for the whole page. The variable is now available everywhere in your CSS.

Setting CSS Variables on Specific Elements

You can also set variables on individual elements. This scopes the variable to that element and its children. Use element.style.setProperty().

 
// Select a specific element
const box = document.querySelector('.box');

// Set a CSS variable on that element
box.style.setProperty('--box-color', 'coral');

// Verify
console.log(box.style.getPropertyValue('--box-color'));

This only affects the .box element. Other elements keep their original styles.

Example: Dynamic Theme Switcher

Let's build a simple theme switcher. We will change the background and text color using JavaScript. This is a common use case.

First, the HTML structure.

Theme Switcher
Light ThemeDark Theme

Now, the CSS uses variables.

:root {
  --bg-color: white;
  --text-color: black;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

Finally, the JavaScript to set the variables.

 
// Get the root element
const root = document.documentElement;

// Light theme function
function setLightTheme() {
  root.style.setProperty('--bg-color', 'white');
  root.style.setProperty('--text-color', 'black');
}

// Dark theme function
function setDarkTheme() {
  root.style.setProperty('--bg-color', '#333');
  root.style.setProperty('--text-color', '#f0f0f0');
}

// Add event listeners
document.getElementById('lightBtn').addEventListener('click', setLightTheme);
document.getElementById('darkBtn').addEventListener('click', setDarkTheme);

Click the buttons. The page changes colors instantly. This works because we set the CSS variables on the root.

Using Variables in Animations

You can combine JavaScript and CSS variables for animations. For example, change a variable over time with setInterval or requestAnimationFrame.

 
let hue = 0;
const root = document.documentElement;

function updateColor() {
  hue = (hue + 1) % 360;
  root.style.setProperty('--hue', hue);
}

setInterval(updateColor, 50);

In your CSS, use --hue in a color function like hsl(var(--hue), 100%, 50%). The color will cycle smoothly.

Getting and Removing CSS Variables

You can also read the current value of a variable. Use getPropertyValue(). To remove a variable, use removeProperty().

 
// Read a variable
const currentBg = root.style.getPropertyValue('--bg-color');
console.log(currentBg); // e.g., 'white'

// Remove a variable
root.style.removeProperty('--bg-color');

Removing a variable makes it fall back to its inherited or default value.

Important Notes

Always use the full variable name with --. Without it, the method will not work. Also, the value must be a string. Numbers need to be converted, like '20px'.

CSS variables are case-sensitive. --Color and --color are different. Be consistent.

For a deeper understanding of variable behavior, read our guide on JavaScript Variable Scope Explained. It explains how scope works in JavaScript.

Browser Support

All modern browsers support setProperty() with CSS variables. This includes Chrome, Firefox, Safari, and Edge. Internet Explorer does not support CSS variables at all.

If you need to support older browsers, consider a polyfill. But for most projects, you are safe.

Conclusion

Setting CSS variables with JavaScript is easy and powerful. Use setProperty() on the root or specific elements. You can create dynamic themes, animations, and responsive designs.

Remember to use the full variable name (--variable-name). Always pass the value as a string. Practice with the examples above to get comfortable.

For more on variable declaration, see our JavaScript Variable Declaration Guide. It covers how to declare variables in JavaScript.

Now you can control your CSS variables with JavaScript. Start building dynamic and interactive web pages today.