Використання CSS Variables для динамічної зміни теми сайту

CSS, SCSS  · 

У веб-розробці гнучкість та динамічність дизайну мають величезне значення. CSS Variables (змінні CSS) є потужним інструментом для ефективної маніпуляції стилями, що дозволяють легко та швидко змінювати тему сайту.

Що таке CSS Variables?

CSS Variables або CSS-змінні - це шлях для зберігання значень CSS властивостей у змінних. Вони прописуються у форматі --variable-name, а використовуються за допомогою var(--variable-name). Це дає розробникам можливість економити час та зусилля при змінах стилів, зменшуючи дублювання коду.

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

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

Динамічна зміна теми сайту

Створити динамічну тему за допомогою CSS Variables не тільки зручно, але й досить просто. Для цього необхідно змінювати значення змінних в залежності від вибраної теми, наприклад, світлої чи темної.

Практичний приклад

  1. Задати дефолтні значення для змінних:
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
  1. Визначити альтернативні схеми кольорів:
[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}
  1. Перемикання теми за допомогою 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);

Цей скрипт змінює атрибут data-theme на елементі html під час натискання кнопки із ID theme-switcher.

Переваги використання CSS Variables