Урок 13. Частые ошибки
⚡ Кратко
Вспышка светлой темы, инверсия вместо второй палитры, забытые состояния и тени, которые в темноте не работают.
Ошибка 1. Вспышка при загрузке
Как ломается: при каждом обновлении страница на мгновение белая, потом становится тёмной.
Почему: класс темы ставится после загрузки JavaScript,
а первый кадр браузер рисует раньше. Лечится синхронным скриптом
в <head> — см. решение задания 3.
Ошибка 2. Инверсия вместо продуманной палитры
❌ Механическая замена
<div class="bg-white text-black dark:bg-black dark:text-white">…</div>✅ Мягкие поверхности
<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">…</div>Почему: чистый чёрный фон с чистым белым текстом
утомляет глаза сильнее, чем тёмно-серый с почти белым. Ни одна известная
дизайн-система не использует #000 как фон приложения.
Ошибка 3. Забытые состояния
Как ломается: в тёмной теме кнопка при наведении становится светлее фона страницы или сливается с ним.
Как правильно: дублируйте не только базовый цвет,
но и hover, focus, disabled:
dark:hover:bg-slate-700. Это ещё один аргумент в пользу токенов —
там состояния описываются один раз.
Ошибка 4. Тени в темноте
❌ Тень остаётся
<div class="bg-white shadow-lg dark:bg-slate-800">…</div>✅ Тень заменена кольцом
<div class="bg-white shadow-lg dark:bg-slate-800 dark:shadow-none dark:ring-1 dark:ring-white/10">…</div>Ошибка 5. Картинки и логотипы
Логотип в PNG с белым фоном превращается в яркий прямоугольник. Решения:
SVG с currentColor, два файла и переключение через
dark:hidden / hidden dark:block, либо
dark:opacity-90 для фотографий.
Ошибка 6. Тестирование только в одной теме
Заведите привычку: любой новый компонент проверяется в обеих темах сразу. Переключатель темы должен быть под рукой во время разработки, а не «когда дойдут руки». Половина дефектов тёмной темы — это компоненты, которые никто в ней не открывал.