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

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

0 голосов
/ 25 октября 2018

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

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

1 Ответ

0 голосов
/ 25 октября 2018

Использовать 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.

...