Как использовать темный режим в CSS с MacOS Mojave?

Question

MacOS Mojave был недавно выпущен с опцией Dark Mode.

Есть ли способ использовать его в веб-приложениях с помощью CSS?

Answer 1

Использование prefers-color-scheme медиа-запрос:

/* Text and background color for light mode */
body {
  color: #333;
}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

prefers-color-scheme Запрос поддерживает три значения: dark, light, а также no-preference,

Полифилы не требуются, код медиазапроса будет пропущен, если ваш браузер не поддерживает его.

Примечание. Он поддерживается в Safari 12.1 и Safari Tech Preview 68. Safari 12, поставляемый с Mojave, не поддерживает медиазапрос.

iOS, Chrome и Firefox не поддерживают Dark Mode с октября 2018 года.