1/* Автоматична темна тема через media query */
2:root {
3  --color-bg:   #ffffff;
4  --color-text: #111827;
5  --color-card: #f9fafb;
6}
7
8@media (prefers-color-scheme: dark) {
9  :root {
10    --color-bg:   #0f172a;
11    --color-text: #f1f5f9;
12    --color-card: #1e293b;
13  }
14}
15
16/* Ручне перемикання теми через data-атрибут */
17[data-theme="dark"] {
18  --color-bg:   #0f172a;
19  --color-text: #f1f5f9;
20}
21
22/* JavaScript для перемикання */

💡 Приклад коду

// toggle.js
const toggle = document.querySelector('#theme-toggle');
toggle.addEventListener('click', () => {
  const html = document.documentElement;
  const current = html.getAttribute('data-theme');
  html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
  localStorage.setItem('theme', html.getAttribute('data-theme'));
});

// Відновлення теми після перезавантаження
const saved = localStorage.getItem('theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);

/* Змінні в компонентах (локальна область) */
.card {
  --card-padding: var(--space-6);
  --card-bg: var(--color-card);
  padding: var(--card-padding);
  background: var(--card-bg);
}
.card.compact {
  --card-padding: var(--space-3); /* перевизначення тільки для .compact */
}

← Попередній урок Наступний урок →