How to Use CSS Variables for Theme Switching

CSS variables, also known as custom properties, are a powerful feature in modern web development that allows you to create interactive and dynamic styles. One of the most exciting applications of CSS variables is theme switching, which enables users to toggle between different visual styles on your website. In this article, we'll explore how to implement theme switching using CSS variables effectively.

What are CSS Variables?

CSS variables are defined using the syntax --variable-name: value; and can be applied throughout your stylesheets. They provide a flexible way to manage styles and make it easier to implement theme switching, as you can redefine variable values based on user preferences.

Setting Up CSS Variables

To get started, define your theme colors and other properties as CSS variables in the :root pseudo-class. This makes them globally accessible throughout your stylesheet.

:root {
    --primary-color: #3498db;
    --background-color: #ffffff;
    --text-color: #333333;
}
.dark-theme {
    --primary-color: #2c3e50;
    --background-color: #1c1c1c;
    --text-color: #ecf0f1;
}

In this example, we established a light theme and a dark theme. By encapsulating different color schemes in a class, we can switch between them easily with JavaScript.

Creating the Theme Switcher

Next, we’ll need a toggle switch in our HTML to allow users to switch themes. Here’s a simple example using a checkbox:

<label for="theme-switch">
    <input type="checkbox" id="theme-switch"> Toggle Theme
</label>

Now, we can use JavaScript to listen for changes to this checkbox and switch between themes by adding or removing the dark-theme class to the document’s body.

const themeSwitch = document.getElementById('theme-switch');
themeSwitch.addEventListener('change', () => {
    document.body.classList.toggle('dark-theme');
});

This simple script listens for the change event on the checkbox. When the user toggles it, it will apply or remove the dark-theme class accordingly, allowing for instant style changes based on the selected theme.

Applying CSS Variables

With the themes set up, apply the CSS variables to your elements. For instance, you can use them for background colors, text colors, and more.

body {
    background-color: var(--background-color);
    color: var(--text-color);
}
button {
    background-color: var(--primary-color);
    color: var(--text-color);
}

This ensures that whenever you change the theme, all elements relying on these CSS variable values update their styles instantly.

Saving the User's Theme Preference

To improve user experience, consider saving the user's theme preference in local storage. When the page loads, you can check for this preference and apply the corresponding theme.

const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    document.body.classList.add(savedTheme);
    themeSwitch.checked = savedTheme === 'dark-theme';
}
themeSwitch.addEventListener('change', () => {
    const theme = themeSwitch.checked ? 'dark-theme' : '';
    document.body.classList.toggle('dark-theme', theme);
    localStorage.setItem('theme', theme);
});

This script retrieves the saved theme preference from local storage and applies it on page load, ensuring that users see their preferred theme every time they visit the site.

Conclusion

Using CSS variables for theme switching is an efficient and user-friendly method to enhance your web application's usability. By implementing the strategies outlined above, you can create a dynamic, responsive design that caters to user preferences. With a few lines of code, you can elevate the aesthetic appeal of your site and improve accessibility for all users.

How to Use CSS Variables for Theme Switching