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

Question

Аналогично " Как определить, находится ли OS X в темном режиме? " только для браузеров.

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

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

Answer 1

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

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

Но, похоже, это private . В MDN CSS-медиа функция inverted-colors упоминается .Plug: я писал о темном режиме здесь .

Answer 2

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

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

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

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

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

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

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

EDIT (7 декабря 2018):

In Предварительный выпуск Safari Technology, выпуск 71 , в Safari был объявлен тумблер, упрощающий тестирование.Я также создал тестовую страницу , чтобы увидеть поведение браузера.

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

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

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

-

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

Answer 3

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