Домашнее задание

Задача: создайте набор токенов --color-*, --space-*, --radius-*; примените их к карточке через var() и переопределите минимум три значения в @media (prefers-color-scheme: dark). Добавьте один var(--x, fallback) для необязательного значения.

Соберите HTML

Короткая семантическая карточка: заголовок, текст, кнопка.

<article class="card">
  <h2>Заголовок</h2>
  <p>Описание карточки.</p>
  <button class="card__btn">Действие</button>
</article>

Объявите токены в :root

Вынесите цвета, отступы и радиус в переменные — один источник истины.

:root {
  --color-bg:     #ffffff;
  --color-text:   #172033;
  --color-accent: #0f766e;
  --space-card:   1.5rem;
  --radius-card:  .75rem;
}

Примените через var() и добавьте fallback

Карточка читает токены, а необязательный фон кнопки подстрахован fallback.

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-card);
  border-radius: var(--radius-card);
}
.card__btn {
  background: var(--btn-bg, var(--color-accent));
}

Сделайте тёмную тему

Переопределите минимум три переменные — компоненты переоденутся сами.

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:     #111827;
    --color-text:   #f8fafc;
    --color-accent: #5eead4;
  }
}

Проверьте переключение в DevTools (эмуляция prefers-color-scheme) — разметку и селекторы трогать не нужно.

Урок 40. Домашнее задание: CSS-переменные (custom properties)

⚡ Кратко