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

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

⚡ Кратко

Сделайте карточку, которая сама переключается на тёмную тему по системной настройке и убирает анимацию для тех, кому она мешает. Проверять — через эмуляцию media в DevTools.

Ожидаемый результат

Карточка должна выглядеть так в светлой и тёмной теме — переключение по системной настройке, без кнопки:

light dark
Одна разметка, две палитры. Цель заданий.

Задания

  1. Тема через переменные. Опишите палитру светлой темы в :root через CSS-переменные (--bg, --text, --accent) и примените их к body и кнопке.
  2. Тёмная тема. Добавьте @media (prefers-color-scheme: dark) и переопределите те же переменные тёмными значениями. Не забудьте пару «фон + текст».
  3. color-scheme. Объявите color-scheme: light dark на :root и объясните в комментарии, на что это влияет.
  4. Reduced motion. Добавьте @media (prefers-reduced-motion: reduce), который сводит длительность всех анимаций и переходов к мгновенным.
  5. Проверка. В DevTools (Rendering → Emulate CSS media feature) переключите prefers-color-scheme и убедитесь, что обе темы корректны, а текст читаем.
Подсказка: держите цвета только в переменных. Тогда тёмная тема — это просто новые значения переменных, а не дублирование всех правил.

Навигация