Урок 13. Задания
⚡ Кратко
Три задания на тёмную тему и четыре вопроса.
Задания
Задание 1. Карточка в двух темах
Возьмите карточку из урока 07 и добавьте тёмный вариант: фон, текст, граница, кнопка и её состояние наведения. Тень в тёмной теме замените кольцом.
Задание 2. Перевод на токены
Опишите четыре токена: --surface, --surface-foreground,
--muted-foreground, --border-color — и перепишите
карточку из задания 1 так, чтобы в её классах не осталось ни одного
dark:.
Задание 3. Переключатель
Сделайте переключатель на три положения (светлая / тёмная / системная)
с сохранением выбора в localStorage. Добейтесь, чтобы при
перезагрузке страницы не было вспышки светлой темы.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что делает dark:bg-slate-900 по умолчанию, без дополнительных настроек?
Вопрос 2
Зачем нужен @theme inline для темизации?
Вопрос 3
Почему в тёмной теме тени заменяют кольцом или рамкой?
Вопрос 4
Как избавиться от вспышки светлой темы при загрузке?