How to Use CSS Variables for Dark and Light Themes

With the rise of dark mode in applications and websites, utilizing CSS variables can simplify the implementation of theme switching. CSS variables, also known as custom properties, provide a flexible way to manage colors and styles across your web design. This guide will outline the steps to effectively use CSS variables to create a seamless dark and light theme switcher for your website.

1. Understanding CSS Variables

CSS variables allow you to define a property once and reuse it throughout your stylesheet. This feature makes it easier to manage styles, especially when creating themes. A CSS variable is declared using the --variable-name syntax.

2. Setting Up Basic Light and Dark Themes

First, you need to define colors for both the light and dark themes using CSS variables. For instance:


:root {
    --background-color: #ffffff; /* Light theme background */
    --text-color: #000000; /* Light theme text color */
}
[data-theme='dark'] {
    --background-color: #000000; /* Dark theme background */
    --text-color: #ffffff; /* Dark theme text color */
}

In this example, the :root selector establishes the default theme (light in this case), while the [data-theme='dark'] selector changes the variables when the dark theme is applied.

3. Applying CSS Variables

Utilize these variables throughout your CSS. For example:


body {
    background-color: var(--background-color);
    color: var(--text-color);
}
h1, h2, h3 {
    color: var(--text-color);
}

This method enhances maintainability because changing a single variable affects all associated styles.

4. Toggling the Theme

To enable users to switch themes, you can use JavaScript to toggle the data-theme attribute on the html element. Here's a simple script:


const toggleSwitch = document.getElementById('theme-toggle');
toggleSwitch.addEventListener('change', () => {
    if (toggleSwitch.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    } else {
        document.documentElement.setAttribute('data-theme', 'light');
    }
});

Ensure you include a checkbox or toggle button in your HTML:


Toggle Theme

5. Saving User Preference

To enhance user experience, consider saving the user's theme preference using local storage:


const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    toggleSwitch.checked = currentTheme === 'dark';
}
toggleSwitch.addEventListener('change', () => {
    const theme = toggleSwitch.checked ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
});

6. Conclusion

By leveraging CSS variables, you can create elegant dark and light themes for your website with minimal effort. The combination of CSS, JavaScript, and local storage allows for a dynamic user experience that accommodates personal preferences.

Incorporating this modern approach into your web design not only enhances usability but also makes your site visually appealing in any lighting condition.

How to Use CSS Variables for Dark and Light Themes