Dynamic Theming With CSS Variables Made Easy

Why Dynamic Theming Matters

Let’s face it, static themes are a thing of the past. Users expect flexibility. They want to switch between light and dark modes, or even pick their own accent colors. Doing this with traditional CSS can become a tangled mess of duplicated styles and complex selectors. This is where CSS variables, also known as custom properties, shine.

Introducing CSS Variables (Custom Properties)

CSS variables are custom properties that you define yourself. They start with two hyphens (—) and can hold any valid CSS value. Think of them as placeholders for values that you might need to reuse or change frequently.

Here’s how you declare them:

1
:root {
2
  --primary-color: #007bff;
3
  --background-color: #ffffff;
4
  --text-color: #333333;
5
}

The :root pseudo-class is often used to declare global variables. This makes them accessible throughout your entire document.

Using Your Variables

To use a variable, you use the var() function. It takes the variable name as its first argument.

1
body {
2
  background-color: var(--background-color);
3
  color: var(--text-color);
4
}
5

6
h1 {
7
  color: var(--primary-color);
8
}

See how clean that is? We’re not repeating values. If we want to change the primary color for the whole site, we only need to change it in one place.

Dynamic Theming in Action

Now for the magic. We can change these variables dynamically using JavaScript. This is how you implement features like a dark mode toggle.

Let’s set up a simple theme switcher. We’ll have a light theme and a dark theme. First, define your variables in your CSS. We’ll use :root for the default (light) theme.

1
:root {
2
  --background-color: #ffffff;
3
  --text-color: #333333;
4
  --primary-color: #007bff;
5
  --button-bg: #e0e0e0;
6
  --button-text: #333333;
7
}
8

9
.dark-theme {
10
  --background-color: #1a1a1a;
11
  --text-color: #f0f0f0;
12
  --primary-color: #bb86fc;
13
  --button-bg: #333333;
14
  --button-text: #f0f0f0;
15
}
16

17
body {
18
  background-color: var(--background-color);
19
  color: var(--text-color);
20
  transition: background-color 0.3s, color 0.3s;
21
}
22

23
button {
24
  background-color: var(--button-bg);
25
  color: var(--button-text);
26
  border: none;
27
  padding: 10px 20px;
28
  cursor: pointer;
29
  transition: background-color 0.3s, color 0.3s;
30
}
31

32
h1 {
33
  color: var(--primary-color);
34
}

Notice how we’ve defined a .dark-theme class that overrides the root variables. When this class is applied to the body element, the styles using those variables will automatically update.

JavaScript Control

Now, let’s use JavaScript to toggle this .dark-theme class on the body element.

1
const themeToggleButton = document.getElementById('theme-toggle');
2
const bodyElement = document.body;
3

4
themeToggleButton.addEventListener('click', () => {
5
  bodyElement.classList.toggle('dark-theme');
6

7
  // Optional: Save preference to localStorage
8
  if (bodyElement.classList.contains('dark-theme')) {
9
    localStorage.setItem('theme', 'dark');
10
  } else {
11
    localStorage.setItem('theme', 'light');
12
  }
13
});
14

15
// Optional: Load saved theme on page load
16
const savedTheme = localStorage.getItem('theme');
17
if (savedTheme === 'dark') {
18
  bodyElement.classList.add('dark-theme');
19
}

In this JavaScript snippet, we get a reference to a hypothetical button (#theme-toggle) and the body. When the button is clicked, we simply toggle the dark-theme class on the body. This instantly applies the dark theme styles because the CSS variables are overridden.

We also added optional code to persist the user’s preference using localStorage, so their chosen theme remains even after they refresh the page or come back later.

Benefits of CSS Variables for Theming

1. Maintainability: Centralized definitions mean fewer places to update styles.
2. Readability: Code becomes cleaner and easier to understand.
3. Performance: Browser optimizations for CSS variables are generally good.
4. Flexibility: Easily implement complex theming systems, color palettes, and responsive styles.

Conclusion

CSS variables are a powerful tool for modern web development. They make dynamic theming, like light/dark modes, incredibly straightforward and maintainable. If you’re not using them yet, give them a try. You’ll likely find your theming workflow becomes much smoother and your applications more user-friendly. It’s a win-win.