Урок 38. Старый vs Новый: prefers-* media: доступность и тема

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

⚡ Кратко

Раньше тёмную тему делали только кнопкой на JavaScript — и она игнорировала системную настройку человека. Сейчас CSS сам читает prefers-color-scheme и применяет тему без скриптов, ещё до первой отрисовки.

Старый подход: только ручное переключение на JS

Тема включалась исключительно кнопкой. Если человек уже выбрал тёмную тему в системе — сайт всё равно стартовал светлым, до клика. Скрипт обязателен, возможна «вспышка» белого фона при загрузке.

📄 lesson-38/old.css + old.js
/* old.css */
.theme-dark {
  background: #111827;
  color: #ffffff;
}
// old.js — без этого тема не включится вообще
button.onclick = () => {
  document.body.classList.toggle('theme-dark');
};

Современный подход: CSS читает настройку пользователя

Браузеру даются обе палитры, а выбор делает медиа-запрос по реальной системной настройке — мгновенно и без JavaScript. Кнопку можно добавить сверху как опцию, но базовое поведение уже корректно.

📄 lesson-38/modern.css
:root {
  color-scheme: light dark;     /* системные элементы тоже под тему */
  --bg: #ffffff;
  --text: #172033;
}

@media (prefers-color-scheme: dark) {
  :root {                       /* человек выбрал тёмную в ОС */
    --bg: #111827;
    --text: #f8fafc;
  }
}

body { background: var(--bg); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; } /* уважаем просьбу убрать движение */
}

Результат обоих подходов выглядит одинаково, но современный срабатывает сам и для нужного пользователя:

Светлая

система: light

Тёмная

система: dark — без клика

/* итог: тема выбирается из настройки ОС,
   а не ждёт, пока пользователь нажмёт кнопку */

Навигация