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:
<body>
<h1>I'm using CSS variables!</h1>
<button id="theme-switcher">Me too</button>
</body>
: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);
}
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.
document.getElementById("theme-switcher")?.addEventListener("click", () => {
document.documentElement.classList.toggle("dark-theme");
});
Then, when dark-theme is present, overwrite the CSS variables previously defined.
:root.dark-theme {
--primaryColor: #47c519;
--secondaryColor: #0c2404;
--backgroundColor: #111111;
}
Let's see what happens when clicking the button.
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.
* {
transition-property: color, background-color, border-color;
transition-duration: 0.5s;
transition-timing-function: ease;
}
🎁 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.
@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.
Cătălin Onuțu | Web Developer
Experienced web developer passionate about crafting efficient, accessible, and fast digital solutions.
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!
Top comments (9)
Excellent, thanks
nice article 😀 variables really have made this sort of thing way easier!
as you’ve shown here, it’s good practice to use the system settings as your default, but you also want the user selection to override that so they can have more granular control over their experience.
this subject also goes way deeper as you start to introduce selection persistence, SSR, and custom themes that go beyond just light and dark. maybe a follow up post??? 😉
again, nice aricle! and keep up the great work!
Indeed, it becomes a bit more interesting when it comes to synchronizing default & opt-in preferences -- then persistence. 😁
I probably will come up with a follow-up post on these.
Thanks for the feedback and for this great suggestion!
i can't wait to read it
Very nice article! Thanks ☺️
Thank you!
Since this is my first post, your comment motivates me to continue 😁
Glad to hear that! 💪
Thanks for the article, do you know if this "prefers-color-scheme" is configured in the browser settings somewhere? I remember that there was an attribute that can be added to the body tag or something to indicate which color scheme a user prefers...
I believe it is an operating system level setting and the browser passes it onto loaded pages. That is happening on the combination of macOS & Chrome that I'm using. It could differ on other operating systems though.
By the sounds of it, you might be referring to the
color-schemeproperty.