0Pricing
CSS Academy · Урок

Медиазапрос prefers-color-scheme

Определяйте предпочтение пользователя относительно тёмного или светлого режима системы с помощью медиазапроса prefers-color-scheme.

«Медиазапрос prefers-color-scheme» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Зачем нужен автоматический тёмный режим?

Многие пользователи включают тёмный режим на уровне ОС ради комфорта, экономии заряда (на экранах OLED) или доступности. Медиазапрос prefers-color-scheme определяет это предпочтение и позволяет сайту адаптироваться автоматически.

Значения запроса

Два значения:

  • light — пользователь предпочитает светлую цветовую схему (или не имеет предпочтений)
  • dark — пользователь предпочитает тёмный режим
<p>This page respects your OS dark mode setting.</p>

Мобильный подход с приоритетом dark

Если большинство пользователей работают на мобильных устройствах с OLED, рассмотрите возможность сделать dark базовым стилем:

<p>Dark by default; switches to light in light mode.</p>

Подход с переменными CSS

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

<div class="card">Themed card using CSS variables</div>

Изображения в режиме dark

Уменьшайте яркость изображений в режиме dark, чтобы они не ослепляли:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

Обнаружение в JavaScript

Проверяйте предпочтение режима dark в JavaScript для динамического поведения:

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

Тестирование в DevTools

В Chrome DevTools → на вкладке Rendering → выберите эмуляцию CSS prefers-color-scheme. Переключайтесь между светлым режимом и dark, не изменяя настройки OS. В Firefox: DevTools → вкладка Inspector → меню значка глаза.

Принципы цвета для режима dark

Эффективный режим dark:

  • Используйте для фона тёмно-серый цвет, а не чистый чёрный — это снижает нагрузку на глаза
  • Уменьшайте тени возвышения — для более высоких поверхностей используйте более светлые оттенки фона
  • Делайте цвета границ светлее, чтобы они были заметнее
  • Проверяйте коэффициенты контрастности текста — могут потребоваться другие коэффициенты

Антипаттерн инверсии цветов

Никогда не инвертируйте просто все цвета с помощью filter: invert(1) для режима dark. Изображения и значки приобретут странные цвета. Используйте правильные токены режима dark с подходящими цветами для каждого элемента.

Производительность: предотвращение вспышки

Если переключение темы выполняется с помощью JavaScript, предотвратите вспышку неоформленной темы (FOUT), синхронно применив класс темы к <html> в теге <script> внутри <head> до отрисовки страницы.

Метацвет темы

Обновляйте цвет элементов интерфейса браузера (мобильной адресной строки, переключателя задач), чтобы он соответствовал теме dark:

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

Быстрая проверка

Какое значение медиазапроса следует использовать, чтобы применить стили режима dark, когда в OS установлен режим dark?

Повторение

prefers-color-scheme: dark определяет предпочтение OS относительно режима dark. Реализуйте автоматический режим dark с помощью переменных CSS, которые заменяют значения токенов внутри медиазапроса. Уменьшайте яркость изображений в режиме dark. Тестируйте в DevTools. Обновляйте метатег theme-color браузера для полноценной работы на мобильных устройствах.

Часто задаваемые вопросы

Урок «Медиазапрос prefers-color-scheme» бесплатный?

Да — полный текст урока «Медиазапрос prefers-color-scheme» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Медиазапрос prefers-color-scheme»?

Определяйте предпочтение пользователя относительно тёмного или светлого режима системы с помощью медиазапроса prefers-color-scheme. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Медиазапрос prefers-color-scheme»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Медиазапрос prefers-color-scheme
  2. Переменные CSS для темизации
  3. Свойство color-scheme
  4. Автоматическое и ручное переключение тёмного режима
← Назад к CSS Academy