Что такое prefers-color-scheme?

prefers-color-scheme — это медиафункция CSS, которая сообщает сайтам, какую тему вы предпочитаете: тёмную или светлую. Браузеры получают эту информацию из настроек тёмного режима вашей системы в Windows, macOS, Linux, Android или iOS, а сайты переключают цвета с помощью @media (prefers-color-scheme: dark) в CSS или window.matchMedia("(prefers-color-scheme: dark)") в JavaScript. Если сайт остаётся светлым, когда в системе включена тёмная тема, первым делом проверьте, что именно сообщает браузер.

Описание инструмента

Этот инструмент показывает тему вашей системы крупным текстом: «Тёмная» с изображением луны или «Светлая» с изображением солнца. Он проверяет, соответствует ли настройка браузера prefers-color-scheme: dark, и отслеживает изменения. Поэтому, когда вы переключаете тёмный и светлый режим в настройках устройства, результат обновляется сразу, без перезагрузки страницы. Любое значение, отличное от тёмной темы, отображается как «Светлая».

Результат показывает, что браузер сообщает сайтам, а это не всегда совпадает с настройками системы. Например, в Firefox есть параметр «Внешний вид сайтов», который позволяет сделать все сайты светлыми или тёмными независимо от темы системы.

Возможности

  • Сразу показывает, включена тёмная или светлая тема
  • Обновляет результат в реальном времени при смене системной темы
  • Работает в браузере, установка не требуется