Урок 13. Домашнее задание: тёмная тема проекта

Шаг 1. Роли и значения

/* src/index.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-surface: var(--surface);
  --color-surface-foreground: var(--surface-foreground);
  --color-brand: var(--brand);
}

:root {
  --surface: oklch(1 0 0);
  --surface-foreground: oklch(0.21 0.01 265);
  --brand: oklch(0.55 0.21 264);
}

.dark {
  --surface: oklch(0.21 0.01 265);
  --surface-foreground: oklch(0.98 0 0);
  --brand: oklch(0.62 0.19 264);
}

Начните с шести токенов — этого достаточно. Расширять будете по мере появления новых поверхностей.

Шаг 2. Замена цветов в разметке

Пройдитесь по компонентам и замените bg-white → bg-card, text-slate-900 → text-foreground, text-slate-500 → text-muted-foreground, border-slate-200 → border-border.

Шаг 3. Переключатель

// src/theme.ts — переключение темы и запоминание выбора
const KEY = 'theme'

export function applyTheme(theme: 'light' | 'dark' | 'system') {
  const isDark =
    theme === 'dark' ||
    (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)

  document.documentElement.classList.toggle('dark', isDark)
  localStorage.setItem(KEY, theme)
}

// вызывать как можно раньше, до первой отрисовки
applyTheme((localStorage.getItem(KEY) as 'light' | 'dark' | 'system') ?? 'system')

Кнопки переключателя должны показывать текущее состояние — например, подсветкой активного варианта через aria-pressed.

Шаг 4. Проверка

Откройте каждую страницу в обеих темах. Особое внимание — полям формы, отключённым кнопкам, состояниям наведения и таблицам с зеброй.