How to Implement CSS Variables for Dark Mode

Implementing CSS variables for dark mode can greatly enhance user experience by providing a visually appealing interface that adapts to users' preferences. Here’s a step-by-step guide on how to effectively implement CSS variables for a dark mode feature on your website.

Understanding CSS Variables

CSS variables, also known as custom properties, allow you to store values in a variable format and apply them throughout your style sheets. This makes them perfect for managing theme colors in dark mode and light mode effectively.

Step 1: Define Your CSS Variables

Begin by defining your CSS variables for both dark mode and light mode. This typically involves setting up a base color scheme for your application.


:root {
    --primary-bg-color: #ffffff;  /* Light mode background color */
    --primary-text-color: #000000; /* Light mode text color */
}
.dark-mode {
    --primary-bg-color: #000000;  /* Dark mode background color */
    --primary-text-color: #ffffff; /* Dark mode text color */
}

The ":root" selector defines these variables in the light mode, and the ".dark-mode" class overrides them for dark mode.

Step 2: Apply CSS Variables in Your Styles

Now, apply these variables within your CSS rules. This way, switching themes becomes a simple process of toggling a class.


body {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}
.header {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}

In the code above, the body and header elements will adjust their background and text colors based on the active theme.

Step 3: Toggle Dark Mode with JavaScript

To allow users to switch between light mode and dark mode, use a simple JavaScript function. This typically involves adding or removing the ".dark-mode" class from the body element of your HTML.


const toggleButton = document.getElementById('toggle-dark-mode');
toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});

This script listens for a click event on the toggle button and switches the layout between dark mode and light mode accordingly.

Step 4: Remember User Preferences

Save user preferences utilizing localStorage so that the dark mode state persists even when the user refreshes the page. This improves user experience greatly.


const toggleDarkMode = () => {
    document.body.classList.toggle('dark-mode');
    localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
};
toggleButton.addEventListener('click', toggleDarkMode);
// Load user preference on page load
if (localStorage.getItem('dark-mode') === 'true') {
    document.body.classList.add('dark-mode');
}

In this script, the user’s preference is stored in localStorage, and upon page load, you can check this and apply the appropriate classes accordingly.

Conclusion

Implementing CSS variables for dark mode not only simplifies your CSS management but also enhances user engagement with your website. By following these steps, you can create a dynamic user experience that caters to both preferences without duplicating your styling efforts.

Consider testing your implementation across different browsers and devices to ensure that your dark mode feature works seamlessly in all environments.

How to Implement CSS Variables for Dark Mode