Using CSS Variables for Dynamic Theme Changes on the Website

In web development, flexibility and dynamism of design are of immense importance. CSS Variables are a powerful tool for effectively manipulating styles, allowing for easy and quick changes to the site's theme.

What are CSS Variables?

CSS Variables or CSS variables are a way to store values of CSS properties in variables. They are defined in the format --variable-name and used with var(--variable-name). This gives developers the ability to save time and effort when changing styles, reducing code duplication.

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
}

body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

Dynamic Theme Change of the Site

Creating a dynamic theme using CSS Variables is not only convenient but also quite simple. To do this, it is necessary to change the values of the variables depending on the selected theme, for example, light or dark.

Practical Example

1. Set default values for the variables:

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

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

1. Define alternative color schemes:

[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

1. Toggle theme using JavaScript:

const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
};

document.getElementById('theme-switcher').addEventListener('click', toggleTheme);

This script changes the data-theme attribute on the html element when the button with ID theme-switcher is clicked.

Advantages of Using CSS Variables

• Ease of maintenance: The ability to change themes without much effort.
• Reduction of code duplication: Define a variable once — and it is available throughout the entire CSS file.
• Better structure: CSS Variables help make the code cleaner and easier to understand.
• Dynamism and interactivity: Easy use of JavaScript for dynamic theme changes.