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

Ответ 1

Новый стандарт зарегистрирован на 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 dec 2018):

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

Если у вас установлен предварительный выпуск Safari Technology Preview 71, вы можете активировать его с помощью:

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

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

-

EDIT (11 feb 2019): Apple ships in the new Safari 12.1 dark mode

-

EDIT (5 sep 2019): Currently 25% of the world can use dark mode css. Source: caniuse.com

Upcoming browsers:

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

По словам Мозиллы, по состоянию на сентябрь 2019 года этот метод является предпочтительным.

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