How to Use CSS Custom Properties for Theme Switching

The modern web offers a plethora of customization options, among which CSS custom properties (also known as CSS variables) stand out for their flexibility and power. One of the most popular use cases for CSS custom properties is theme switching. This article outlines how to effectively use CSS custom properties to implement theme switching on your website.

What are CSS Custom Properties?

CSS custom properties allow developers to define variables in CSS that can store values for various CSS properties. These variables can be reused throughout the stylesheet, making it easy to maintain and update styles. They are defined using the --variable-name syntax.

Defining Custom Properties

Begin by defining your custom properties within the :root selector. This makes them globally accessible across your CSS stylesheets:

:root {
  --main-bg-color: white;
  --main-text-color: black;
  --secondary-bg-color: gray;
  --secondary-text-color: white;
}

Creating Themes

To create themes, you can define additional custom properties for each theme. For example, for a dark theme, you might add:

.dark-theme {
  --main-bg-color: black;
  --main-text-color: white;
  --secondary-bg-color: darkgray;
  --secondary-text-color: black;
}

You can easily add more themes by creating individual classes or by using media queries for different scenarios, such as a light or dark mode based on user preferences or system settings.

Applying Custom Properties

Use the custom properties throughout your CSS stylesheets like this:

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

This setup allows you to easily switch themes just by toggling the class on the `` or another container element.

JavaScript for Theme Switching

In order to switch between themes dynamically, you can use a simple JavaScript function to change the class on the `body` element:

const themeToggleButton = document.getElementById("theme-toggle");
themeToggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme");
});

In the example above, when the button with the ID "theme-toggle" is clicked, it toggles the `dark-theme` class on the body, which alters the styles based on the defined custom properties. Ensure you have a button in your HTML:

<button id="theme-toggle">Toggle Theme</button>

Persisting User Preferences

To enhance user experience, you can save their theme preference using localStorage:

const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
  document.body.classList.add(currentTheme);
}
themeToggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme");
  const theme = document.body.classList.contains("dark-theme") ? "dark-theme" : "";
  localStorage.setItem("theme", theme);
});

By retrieving the saved theme on initial load, users will always see their preferred theme without having to switch it manually each time they visit.

Conclusion

Leveraging CSS custom properties for theme switching not only streamlines your CSS maintenance but also enhances user experience by allowing them to choose a theme they prefer. With the combination of CSS variables, JavaScript, and local storage, you can create a seamless theme-switching experience for your website visitors.

How to Use CSS Custom Properties for Theme Switching