Урок 38. Ошибки: prefers-* media: доступность и тема

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#prefers-color-scheme #prefers-reduced-motion #prefers-contrast #prefers-reduced-data #color-scheme

⚡ Кратко

Топ-3: (1) поменяли фон в тёмной теме, но забыли цвет текста; (2) тема только через JS, без prefers-color-scheme; (3) забыли color-scheme — и системные элементы остались светлыми.

Ошибка 1. Тёмный текст на тёмном фоне

Переопределили --bg в тёмной теме, а --text оставили тёмным. Текст исчезает. Меняйте пару «фон + текст» вместе.

Так плохо

тёмный текст на тёмном фоне — нечитаемо

Так правильно

светлый текст на тёмном фоне

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --text: #f8fafc;  /* ← легко забыть, но обязательно */
  }
}

Ошибка 2. Тема только через кнопку на JS

Если человек уже выбрал тёмную тему в системе, сайт обязан стартовать тёмным. Кнопка — дополнение, а не замена prefers-color-scheme.

Ошибка 3. Забыли color-scheme

Без color-scheme: light dark скроллбары, чекбоксы и поля ввода останутся светлыми в тёмной теме — выглядит как баг. Одна строка на :root решает.

Ошибка 4. Полностью отключили анимации

В prefers-reduced-motion важно убрать движение, а не функциональность. Не display:none для контента, а сведение длительности к мгновенной. Интерфейс остаётся, исчезает только укачивание.

Ошибка 5. Контраст «на глаз»

В тёмной теме насыщенный синий «горит». Не оценивайте контраст визуально — проверяйте по WCAG (минимум 4.5:1 для обычного текста) для каждой темы отдельно.

Навигация