Как определить, находится ли ОС в темном режиме в браузерах?

Подобно « Как определить, находится ли OS X в темном режиме? » Только для браузеров.

Кто-нибудь нашел, есть ли способ определить, находится ли система пользователя в новом темном режиме OS X в Safari / Chrome / Firefox?

Мы хотели бы изменить дизайн нашего сайта, чтобы он был совместим с темным режимом в зависимости от текущего режима работы.

Новый стандарт зарегистрирован на W3C в Media Queries Level 5 .

ПРИМЕЧАНИЕ: в настоящее время доступно только в Safari Technology Preview Release 68.

В случае предпочтений пользователя light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

В случае предпочтений пользователя dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

Также есть возможность, no-preferenceесли у пользователя нет предпочтений. Но я рекомендую вам просто использовать обычный CSS в этом случае и правильно каскадировать CSS.

РЕДАКТИРОВАТЬ (7 декабря 2018 г.):

В Safari Technology Preview Release 71 они анонсировали тумблер в Safari, чтобы упростить тестирование. Я также сделал тестовую страницу, чтобы увидеть поведение браузера.

Если у вас установлен Safari Technology Preview Release 71, вы можете активировать его через:

Разработка> Экспериментальные функции> Поддержка темного режима CSS

Затем, если вы откроете тестовую страницу и откроете инспектор элементов, у вас появится новый значок для переключения темного / светлого режима.

-

РЕДАКТИРОВАТЬ (11 февраля 2019 г.): Apple поставляется в новом темном режиме Safari 12.1

-

РЕДАКТИРОВАТЬ (5 сен 2019): в настоящее время 25% мира могут использовать темный режим CSS. Источник: caniuse.com

Будущие браузеры:

• iOS 13 (я думаю, она будет выпущена на следующей неделе после Apple Keynote)
• EdgeHTML 76 (не уверен, когда он будет отправлен)

-

РЕДАКТИРОВАТЬ (5 ноя 2019): в настоящее время 74% людей в мире могут использовать темный режим CSS. Источник: caniuse.com

-

РЕДАКТИРОВАТЬ (3 февраля 2020 г.): Microsoft Edge 79 поддерживает темный режим. (выпущено 15 января 2020 г.)

-

Мое предложение: вам следует подумать о внедрении темного режима, потому что большинство пользователей могут использовать его сейчас (особенно для мобильных устройств, то есть для экономии заряда батареи).

Примечание: все основные браузеры теперь поддерживают темный режим, кроме IE, Edge.

Если вы хотите обнаружить его из JS, вы можете использовать этот код:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Чтобы следить за изменениями:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

В настоящее время (сентябрь 2018 г.) это обсуждается в «Черновиках редактора рабочей группы CSS» . Запущен Spec (см. Выше), доступный в виде медиа-запроса. Что-то уже появилось в Safari, см. Также здесь . Так что теоретически вы можете сделать это в Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

Но похоже, что это личное . На MDN функция медиа CSS inverted-colorsявляется упомянуто . Штекер: Я писал о режиме темного здесь .

Я искал через Mozilla API, похоже, у них нет переменных, соответствующих цвету окна браузера. Хотя я нашел страницу, которая может вам помочь: Как использовать стили операционной системы в CSS . Несмотря на заголовок статьи, цвета у Chrome и Firefox разные.

Согласно Mozilla, вот предпочтительный метод по состоянию на сентябрь 2019 г.

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}