Урок 13. Тёмная тема и кастомизация @theme

📁 Раздел: Состояния и темы ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Приставка dark: включает утилиту в тёмной теме. По умолчанию она следует системной настройке; чтобы темой управлял переключатель, добавьте @custom-variant dark (&:where(.dark, .dark *)); и вешайте класс dark на <html>. В больших проектах цвета не дублируют в каждом классе, а описывают семантическими токенами.

О чём этот урок

Тёмная тема — это не «инвертировать цвета». Это вторая палитра, в которой меняются роли: фон становится тёмным, тени перестают работать, границы приходится делать светлее. Разберём три способа включения темы, приём с семантическими токенами (он же лежит в основе shadcn/ui) и типичные ошибки — от мигания при загрузке до нечитаемого текста.

Структура урока

Теория

Как работает dark:, токены и переключение темы.

Справочник

Директивы, классы и код переключателя.

Примеры

Карточки, шапка, форма в двух темах.

Старый vs Новый

Дублирование классов против токенов.

Задания

Перевести интерфейс на токены.

Решения

Разбор с готовым кодом.

Ошибки

Мигание темы, тени в темноте, забытые состояния.

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

Тёмная тема для проекта курса.

Ресурсы

Документация по dark mode.

Практика

  • Нажмите 🌙 в углу страницы — все демо этого урока переключатся вместе с ней.
  • Опишите пару токенов «поверхность / текст» и используйте их вместо цветов.
  • Проверьте контраст в тёмной теме: он часто хуже, чем кажется.

Навигация