How to use CSS variables to create amazing theme transitions 🎨✨
Tags: webdev, css, tutorial, javascript
Published: 2023-11-13 22:40:30

## CSS variables
They are a great out-of-the-box tool that enables you to write cleaner and more reusable styles.

Similar to how variables are `defined` and `referenced` in code, you can declare a CSS variable on an element and then reference it in any of its children.

### Example:
```html
<body>
  <h1>I'm using CSS variables!</h1>
  <button id="theme-switcher">Me too</button>
</body>
```
```css
:root {
  --primaryColor: #0c9f9f;
  --secondaryColor: #043535;
  --backgroundColor: #eeeeee;
}
body {
  background-color: var(--backgroundColor);
}
h1 {
  color: var(--primaryColor);
}
button {
  font-size: 2rem;
  padding: 0.5em 1em;

  color: var(--primaryColor);
  background-color: var(--secondaryColor);
  border: 2px solid var(--primaryColor);
}
```

![Preview for the example above](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xyrgfokknd4gpb8z4xz.png)



See the beauty of it?

Apart from adding semantic value (`--primaryColor` is much easier to understand than `#0c9f9f`), they allow you to change their value once and cascade the change to all elements that use it.

But how can their value change?

## Adding a `dark` theme

First, use some JavaScript to add a `dark-theme` class to the `<body>` element when clicking the button.
```js
document.getElementById("theme-switcher")?.addEventListener("click", () => {
  document.documentElement.classList.toggle("dark-theme");
});
```

Then, when `dark-theme` is present, overwrite the CSS variables previously defined.
```css
:root.dark-theme {
  --primaryColor: #47c519;
  --secondaryColor: #0c2404;
  --backgroundColor: #111111;
}
```
Let's see what happens when clicking the button.

![Theme changes when clicking the button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mtcuhjq8lx76awr4awj.gif)

It changes all the colors! 🎉

## Animating theme changes
 
Colors change, but it's a bit sharp.

Let's make it more smooth by adding a transition to the properties that change.
```css
* {
  transition-property: color, background-color, border-color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
```
![Theme changes are animated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyh0x1q4ic5jtbbipwgx.gif)

## 🎁 Bonus 🎁 Account for user's preferred theme

Most devices offer the ability to use a dark theme nowadays.
You should account for this user preference and render your website based on it straight away.

In order to do so, you can make use of the `prefers-color-scheme` CSS media feature.
```css
@media (prefers-color-scheme: light) {
  :root {
    /* Configuration for light theme */
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Configuration for dark theme */
  }
}
```

## Conclusion

Leveraging CSS variables provides a powerful and efficient way to manage styles in your web projects. The ability to define and reference variables in a clear, semantic manner not only enhances code readability but also enables easy theme customization.

By incorporating JavaScript, you can dynamically switch between themes, showcasing the true flexibility of CSS variables. The animated transitions add a polished touch, ensuring a smooth and visually appealing user experience.

## Explore Further

If you're curious to see these concepts in action, I've implemented a more advanced and interactive theme switcher on my website. 
{% embed https://catalinonutu.com %}

### Share your work in the comments
If you found these insights useful or implemented them in your own projects, I'd love to see what you've come up with!