Using CSS Variables for Theme Customisation

CSS variables, also known as custom properties, offer a flexible and efficient way to implement theme customisation across web applications. By defining reusable values in a single place, you can easily manage and apply themes throughout your site without repeating yourself in the code.

In this blog, we’ll explore how to use CSS variables for theme customisation, and why this approach is beneficial for modern web design.

What are CSS Variables?

CSS variables allow you to store values for reuse across your stylesheets. You can think of them as placeholders that can be updated in one spot but reflected throughout your entire CSS file.

Here’s a simple example of defining and using a CSS variable:

:root {
  --primary-color: #3498db;
}

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

In this example, --primary-color is the variable, and you can access it using the var() function wherever you need it. The :root selector defines the variable at the global level, meaning it can be accessed anywhere in your stylesheet.

Why Use CSS Variables for Themes?

When building applications that require multiple themes (like light and dark modes), CSS variables shine. Instead of hardcoding colors or font sizes throughout your stylesheet, you can store these values in variables and switch themes by changing the values dynamically.

Let’s dive into some key reasons why CSS variables make theme
customisation more manageable:

• Consistency Across Components: By using variables, your UI components will remain consistent. When you need to update a theme color or font size, you only need to adjust it at a single place.

• Dynamic Theme Switching: You can easily switch themes with JavaScript by updating the CSS variable values on the fly, allowing for real-time theme changes without the need for page reloads.

• Easier Maintenance: Updating a design system is much easier when variables are used. For example, if you need to tweak the primary color, you only change it in one place, and the change will propagate throughout the entire site.

Implementing Theme Customisation with CSS Variables

Let’s say we want to build a simple dark mode and light mode theme switcher using CSS variables. We start by defining our theme variables in the :root selector for the default (light) theme:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

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

Next, we define the dark theme by updating the variable values in a custom class. This class will be toggled when switching between themes:

.dark-mode {
  --background-color: #2c3e50;
  --text-color: #ecf0f1;
}

With this setup, all that’s left is to toggle the dark-mode class on the body element using JavaScript when the user switches themes:

const toggleTheme = () => {
  document.body.classList.toggle('dark-mode');
};

Advanced Theme Customisation

CSS variables aren’t limited to just colors. You can use them for any CSS property, such as fonts, spacing, or even animations. Here’s an example of customising font sizes:

:root {
  --base-font-size: 16px;
  --heading-font-size: 2rem;
}

body {
  font-size: var(--base-font-size);
}

h1 {
  font-size: var(--heading-font-size);
}

This level of control allows you to adjust not only colors but also the overall look and feel of your themes dynamically.

Accessibility Considerations

When implementing theme customisation, it’s important to consider accessibility. Ensure that your themes offer sufficient contrast between background and text colors to accommodate users with visual impairments. Tools like WebAIM’s contrast checker can help you ensure that your themes meet accessibility standards.

Conclusion

CSS variables offer a powerful way to customise themes, ensuring consistency across your design while making updates and theme switches simple. Whether you’re building a simple website or a complex web app, integrating CSS variables into your workflow can streamline your development process and improve maintainability.

By leveraging this technique, you’ll provide users with a seamless, dynamic experience that can adapt to their preferences—all with minimal code changes.