Как определить, находится ли ОС в темном режиме в браузерах?
Аналогично «Как определить, находится ли OS X в темном режиме?» только для браузеров.
Кто-нибудь нашел, есть ли способ определить, находится ли система пользователя в новом темном режиме OS X в Safari / Chrome / Firefox?
Мы хотели бы изменить дизайн нашего сайта, чтобы он был совместим с темным режимом в зависимости от текущего режима работы.
Не трогайте, но после Stackoverflow представил темный режим я гуглил как они реализовали "системный" режим и наткнулся на этот вопрос. Я ожидаю много трафика по этому поводу :-)
Ответы 5
Я искал через Mozilla API, похоже, у них нет никаких переменных, соответствующих цвету окна браузера. Хотя я нашел страницу, которая может вам помочь: Как использовать стили операционной системы в CSS. Несмотря на заголовок статьи, цвета у Chrome и Firefox разные.
Он сейчас там - developer.mozilla.org/en-US/docs/Web/CSS/@media/…
Запущен В настоящее время (сентябрь 2018 г.) обсуждается в «Черновиках редактора рабочей группы CSS». Spec (см. Выше), доступный в виде медиа-запроса. Что-нибудь уже приземлился в Safari, см. Также здесь. Так что теоретически вы можете сделать это в Safari / Webkit:
@media (prefers-dark-interface) { color: white; background: black }
Но вроде это частный. В MDN медиа-функция CSS inverted-colors - упомянул. Plug: Я писал о темном режиме здесь.
inverted-colors для определения темного режима. Во-первых, не получится. Во-вторых, он используется для доступности, а НЕ для эстетики. Некоторые пользователи используют инвертированный режим для повышения контрастности экрана, что типично для людей с ослабленным зрением. Пожалуйста, не меняйте внешний вид вашего сайта с учетом inverted-colors, поскольку он в лучшем случае не будет работать так, как вы хотите, а в худшем - это разочарует этих пользователей.
Новый стандарт зарегистрирован на W3C в медиа-запросах, уровень 5.
ПРИМЕЧАНИЕ: в настоящее время доступно только в Предварительный выпуск 68 Safari Technology
Если пользователь предпочитает 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 dec 2018):
В Предварительная версия Safari Technology, выпуск 71 они объявили тумблер в Safari, чтобы упростить тестирование. Я также сделал тестовая страница, чтобы увидеть поведение браузера.
Если у вас установлен Предварительная версия Safari Technology, выпуск 71, вы можете активировать его через:
Develop > Experimental Features > Dark Mode CSS Support
Затем, если вы откроете тестовая страница и откроете инспектор элементов, у вас будет новый значок для переключения темного / светлого режима.
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 ( I guess it will be shipped next week after Apple's Keynote)
- EdgeHTML 76 (not sure when that will be shipped)
EDIT (5 nov 2019): Currently 74% of the world can use dark mode CSS. Source: caniuse.com
EDIT (3 Feb 2020): Microsoft Edge 79 supports dark mode. (released on 15 Jan 2020)
My suggestion would be: that you should consider implementing dark mode because most of the users can use it now (for night-time users of your site).
Note: All major browsers are supporting dark mode now, except: IE,
Edge
EDIT (19 Nov 2020): Currently 88% of the world can use dark mode CSS. Source: caniuse.com
CSS-framework Tailwind CSS v2.0 supports dark-mode. (released on 18 Nov 2020)
Просто протестировал. Если вы измените тему в настройках Mac OS, вам необходимо перезапустить браузер. Жаль, что не синхронизируется на лету.
@HermanStarikov Я опубликовал обновление по этой проблеме, которую вы описываете. В новом выпуске 71 Safari Technology Preview вы можете переключаться в реальном времени.
Хороший! Я сделал небольшую демонстрацию того, как будут выглядеть темы с начальной загрузкой: twitter.com/Hermanhasawish/status/1071517994302562305
Есть ли способ обнаружить это в JavaScript?
@AkashKava Я погуглил, да, это возможно, если вы используете что-то вроде этого: window.matchMedia("(prefers-color-scheme: dark)").matches Если у меня будет свободное время, я добавлю к своему ответу полное решение javascript.
В JS это можно увидеть в этот другой ответ.
Также можно использовать prefers-color-scheme в <link rel = "stylesheet" ...>. Например: предупреждение <link rel = "stylesheet" media = "(prefers-color-scheme: light)" type = "text/css" href = "light.css" /> и <link rel = "stylesheet" media = "(prefers-color-scheme: dark)" type = "text/css" href = "dark.css" />: в Firefox (88 для Ubuntu) media = "(prefers-color-scheme: dark)" сильно мешал title = "Style Name", который можно использовать для переключения между альтернативными таблицами стилей. Использование атрибута title заставило Firefox не выбирать таблицу стилей темного режима (вторую).
В Chromium 91 на Ubuntu 20 <link rel = "stylesheet" media = "(prefers-color-scheme: light)"... и т. д. Не работает. Переключатель темного режима # enable-force-dark включает независимую эвристику рендеринга.
Если вы хотите обнаружить его из 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";
});
Привет! Это прекрасно работает. Мне любопытно, как именно работает этот синтаксис?
@Stormblessed сначала проверит, поддерживает ли браузер matchMedia, а затем попытается сопоставить строку prefers-color-scheme: dark. Если он совпадает, мы в темном режиме.
С новым оператором Элвиса это можно записать как if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
о, в этом есть смысл! Синтаксис с .matches выглядел так, будто сравнивал первое и второе или что-то в этом роде. Спасибо!
Должен быть проверенным ответом.
@MarkSzabo Ваш код действительно работает, но не является кросс-платформенным, как addListener, см. Здесь: developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/… Так и должно быть: window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { this.darkMode = e.matches; });
@StefanRein, насколько мне известно, все версии браузеров, поддерживающие matchMedia, также поддерживают addEventListener, так что это не должно вызывать ошибок.
@MarkSzabo, мое приложение Cordova только что вылетело из-за window.matchMedia('(prefers-color-scheme: dark)').addEventListener is not a function. В то время как в моем настольном браузере все работало. Это была WKWebView iOS 13 с cordova-ios 5.1.1.
@StefanRein, вы включали проверку функций, например window.matchMedia &&?
@MarkSzabo Нет, потому что метод addListener действительно работал с возвращенным MediaQueryList метода matchMedia (). Поскольку matchMedia существует, он все равно вылетает из-за вызова функции, которой не существует
Согласно Mozilla, вот предпочтительный метод с 2020 года.
@media (prefers-color-scheme: dark) {
body {
background: #000;
}
}
@media (prefers-color-scheme: light) {
body {
background: #fff;
}
}
Для Safari / Webkit вы можете использовать
@media (prefers-dark-interface) { background: #000; }
Насколько мне известно, для Safari нет медиа-запроса CSS для определения светлого или темного режима, но Safari полностью поддерживает темные виджеты на HTML-страницах. Может быть полезно зарегистрировать для этого радар.