How to create and configure a dark theme with CSS Variables

The dark theme has become popular among users due to its ability to reduce eye strain, especially in low-light conditions. With CSS Variables, creating and customizing a dark theme has become much easier. This allows developers to easily manage color schemes without the need to rewrite styles for each element.

CSS Variables: Basics

CSS Variables, also known as custom properties, allow you to store values in variables that can then be used in styles. They are defined using two dashes before the variable name, for example, --primary-color. This is especially useful for creating themes, as all color values can be stored in one place and easily changed.

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

In this example, we declare two variables: --background-color and --text-color, which define the color scheme for the light theme.

Creating a Dark Theme

To create a dark theme, we can define a different set of variables that will be used when the dark theme is activated. This allows for easy switching between themes by changing only the variable values.

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

.dark-theme {
  --background-color: #333333;
  --text-color: #ffffff;
}

Now, when the dark-theme class is added to the body element, the colors change according to the defined variables for the dark theme.

Customizing the Theme with JavaScript

To dynamically switch between light and dark themes, JavaScript can be used. This allows users to choose their preferred theme.

const toggleThemeButton = document.querySelector('#toggle-theme');
toggleThemeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

In this example, when the button with the ID toggle-theme is clicked, the dark-theme class is added or removed from the body element, activating the corresponding theme.

Additional Settings

You can also add saving the user's theme choice in localStorage to keep the settings even after the page is reloaded. This enhances the user experience by preserving individual settings.

const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
  document.body.classList.add(currentTheme);
}

toggleThemeButton.addEventListener(click, () => {
  document.body.classList.toggle(dark-theme);
  const theme = document.body.classList.contains(dark-theme) ? dark-theme: light-theme;
  localStorage.setItem(theme, theme);
});

Now, after reloading the page, the theme chosen by the user will be automatically applied. Setting up a dark theme with CSS Variables and JavaScript is a simple and effective way to enhance the website's interface.