Як визначити, чи ОС перебуває в темному режимі в браузерах?

Подібно до " Як визначити, чи ОС X перебуває в темному режимі? " Лише для браузерів.

Хтось знайшов, чи є спосіб виявити, чи система користувача перебуває в новому темному режимі OS X в Safari / Chrome / Firefox?

Ми хотіли б змінити дизайн нашого веб-сайту на придатний для темних режимів на основі поточного режиму роботи.

Новий стандарт зареєстрований на W3C у Media 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.

EDIT (7 грудня 2018 р.):

У Safari Technology Preview Release 71 вони оголосили перемикач у Safari, щоб полегшити тестування. Я також зробив тестову сторінку, щоб побачити поведінку браузера.

Якщо у вас встановлено Safari Technology Preview Release 71, ви можете активувати:

Розробка> Експериментальні функції> Темний режим Підтримка CSS

Потім, якщо ви відкриєте тестову сторінку та відкриєте інспектор елементів, у вас є нова ікона для переключення темного / світлого режиму.

-

EDIT (11 лютого 2019 р.): Apple поставляється в новому темному режимі Safari 12.1

-

EDIT (5 вересня 2019 р.): Наразі 25% країн світу можуть використовувати темний режим CSS. Джерело: caniuse.com

Майбутні браузери:

• iOS 13 (я думаю, він буде поставлений наступного тижня після основного повідомлення від Apple)
• EdgeHTML 76 (не впевнений, коли це буде поставлено)

-

EDIT (5 листопада 2019 р.): Зараз 74% країн світу можуть використовувати темний режим CSS. Джерело: caniuse.com

-

EDIT (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 / 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;
  }
}