Тёмная тема на CSS-переменных

Один набор токенов, две темы: системная по умолчанию и ручное переключение через data-атрибут.

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --surface: #f5f6f8;
  --text: #1a1d21;
  --text-muted: #5b636d;
  --border: #dfe3e8;
  --accent: #2f6feb;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1);

  --radius: 10px;
  --space: 1rem;
}

/* Системная тёмная тема, пока пользователь не выбрал вручную */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14171a;
    --surface: #1c2024;
    --text: #e8eaed;
    --text-muted: #9aa4af;
    --border: #2c3237;
    --accent: #6ea8fe;
    --shadow: 0 1px 3px rgb(0 0 0 / 0.5);
  }
}

/* Ручное переключение */
[data-theme='dark'] {
  --bg: #14171a;
  --surface: #1c2024;
  --text: #e8eaed;
  --text-muted: #9aa4af;
  --border: #2c3237;
  --accent: #6ea8fe;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space);
}