🎨 Using JavaScript to Get/Set CSS Custom Variables: The Magical Theme Park

There was a theme park where all the rides, shops, and decorations followed a color theme.

On Monday, everything glowed blue.
On Tuesday, it all turned green.
On Friday, the park lit up in red.

How did they do this magic? They used CSS custom variables (also called CSS variables) that acted like magic paint buckets. And the park manager (JavaScript) could change the color of the whole park by just switching the bucket’s paint.

What are CSS Custom Variables?

In CSS, you can define a variable (a reusable value) with two dashes (--). Example:

:root {
  --main-color: blue;
}

Now --main-color is like a named paint bucket. You can use it everywhere in your CSS:

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

How Does JavaScript Change It?

JavaScript is like the park manager who says: “Hey, let’s change the main paint bucket color today!”

Set a CSS Variable with JavaScript

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

This changes --main-color to green. Instantly, everything using that variable updates!

Get a CSS Variable with JavaScript

let color = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
console.log(color); // outputs current value, e.g., "green"

Why Is This Useful?

Themes 🌙☀️ → Switch between light mode and dark mode.
Customization 🎨 → Let users pick their favorite colors.
Dynamic Styling ⚡ → Change designs instantly without rewriting all CSS.

Real-Life Analogy

Think of CSS variables as paint buckets labeled with names.

The CSS decorators use these buckets to paint walls.
JavaScript is the park manager who can swap the paint inside a bucket, instantly changing all the walls painted with it.

In Short

CSS variables = reusable values defined with --.
JavaScript can get or set them.
This makes styling flexible, dynamic, and super fun.

Review Questions

CSS custom variables are also called CSS __________.
CSS variables always start with __________.
The function var(--main-color) is used to __________ a CSS variable.
In JavaScript, we use .setProperty() to __________ a CSS variable.
In JavaScript, we use .getPropertyValue() to __________ a CSS variable.
CSS variables act like labeled __________ buckets of paint.
A real-life use of CSS variables with JS is switching between light and __________ mode.
Custom variables are usually defined inside the CSS selector called __________.
When you change a CSS variable in JavaScript, all elements using it update __________.
CSS variables make styling more __________ and dynamic.

🌊 JavaScript Tilde ~ (Bitwise NOT Operator): The Switch Flipper

✨ JavaScript Selection API: The Magic Highlighter