$ grep -r Tag: «css»

iOS 13, которая выйдет этой осенью, будет включать тёмный режим. В современной macOS он уже есть. Принося тёмный режим в iOS, Apple также рекомендует веб-разработчикам адаптировать цвета под тёмную тему.

Реализовать это довольно просто. Достаточно поменять CSS сайта и добавить что-то вроде такого:

:root {
  color-scheme: light dark;
  --body-background-color: white;
  --body-text-color: #2F2F2F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #222222;
    --body-text-color: #E2E2E2;
  }
}

body {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}

То есть мы добавляем поддержку цветовых схем через color-scheme: light dark; и определяем CSS-переменные.

Чтобы протестировать, можно попробовать последний Safari в свежих бетах iOS или macOS, либо (возможно) Safari Developer Preview. В Web Inspector в Safari есть отдельная кнопка для переключения тёмной темы.

Интересный момент: в macOS 10.15 фон body для тёмной темы по умолчанию тоже тёмный. Но в 10.14 он будет белым в Safari и Firefox. Если хотите поддержать macOS < 10.15, придётся явно задать цвет фона для тёмной схемы. На сессии WWDC Apple про это не упомянули. Они просто убрали свойство background-color из CSS и дали выбирать фон операционной системе. В качестве примера приводили сайт NSHipster, но в его CSS как раз есть свойство background-color — для поддержки старых версий macOS :)

Я добавил поддержку тёмной схемы на свой сайт Space In Box. Загляните также на NSHipster — там тоже есть.

Эта статья — что-то вроде краткого пересказа сессии WWDC Supporting Dark Mode in Your Web Content.