От автора: когда мы переходим в 2020 год, у Front-end разработчиков появилась еще одна отличная возможность в наборе функций веб-приложений, с которым нам приходится сталкиваться.
Адаптивность для мобильных устройств, планшетов и настольных ПК
Поддержка различными браузерами (устаревшими и другими)
Проблемы доступности
Прогрессивные веб-приложения
SEO
Оптимизация производительности т. д. и т. п.
Теперь у нас есть Dark Mode (темный режим). Может ли Dark Mode быть соломинкой, которая переломит хребет верблюду?
Позвольте мне пояснить. Мне нравится темный режим. Я смотрю на экран более 8 часов в день, так что привести его как можно ближе к выключенному состоянию — моя прерогатива. Моя натура разработчика была бы счастлива в холодной темной пещере лишь с тусклым светом подсветки клавиатуры. Но в цикле веб-разработки наступает момент, когда в течение дня не хватает времени, чтобы, возможно, рассмотреть все вышеперечисленное.
Темный режим делает опыт пользователя лучше?
В то время как темный режим может облегчить для некоторых чтение с экрана, для опыта пользователя требуется гораздо большего, чем просто инверсия цветов для улучшения восприятия.
Возьмем в качестве примера инструменты разработчика Chrome. Много вкладок, кнопок и флажков, но поменяйте местами цвета и…
Темный режим делает инструменты разработчика немного легче для восприятия глазом, но организация инструментов управления является основной
… Тада! чистый, легкий интерфейс. Нет, к сожалению, темный режим приятно иметь, но он не создает и не разрушает опыт.
Я возвращаюсь к поставленной задаче: Темный режим.
Мои возражения, я должен сказать, немного преждевременны, разработчики уже давно должны были создать несколько тем для каждого веб-приложения, в этом нет ничего нового. Необходимость — мать изобретения, да здравствует чтение телефона в постели без ослепительного белого света в течение нескольких часов.
Немного кода
Так насколько хорошо поддерживается темный режим в Веб? Это, безусловно, привлекло к себе всеобщее внимание MacOS, iOS, Android и Windows 10. Беглый взгляд на caniuse.com показывает, что почти все говорят: да! Вы можете использовать это …. просто не в IE или Edge — ну, это уже привычно.
Быстрая проверка caniuse.com (снимок экрана от октября 2019 г.) показывает, что он в значительной степени готов к использованию.
Итак, как мне «реализовать темный режим»?
Просто с помощью медиа-запроса:
|
1 2 |
@media (prefers-color-scheme: dark) { // dark stuff lies here } |
Выбирайте между no-preference, light и dark, и вуаля, у нас есть предпочтения пользователя. Планируется больше фокусируемых режимов доступности, например, prefers-contrast, направленных на то, чтобы сделать просмотр более приятным, но это все еще на стадии черновика.
Это все хорошо, просто нужно обеспечить, что все цвета были подальше от объявлений размеров. Опять же, мы уже делаем это правильно? Проведите огромный рефакторинг всего, что вы когда-либо писали.
Поскольку Dark Mode поддерживается только последними браузерами, вы можете связать его с пользовательскими свойствами. Он имеет более или менее такую же поддержку, и это может помочь сжать готовый CSS темного режима в переменные CSS.
Если ваш веб-сайт уже выполнен в стиле темного режима, вы можете использовать его по умолчанию и изменить положение вещей для пользователей, которые активно выбирают светлый режим, «чокнутые».
|
1 2 3 4 5 6 7 8 9 |
body { background-color: black; color: white; } @media screen and (prefers-color-scheme: light) { body { background-color: white; color: black; } } |
Могу ли я использовать хак с помощью Javascript?
Да, хотя в основном он прослушивает CSS DOM, посмотрите замечательную реализацию Джонаса Дури:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
function activateDarkMode() { const rootElement = document.querySelector(':root') const darkTheme = { '--background-color': '#1e1e1e', '--primary-color': '#157efb', '--font-color': '#dedede', '--subtle-primary-color': '#151513', '--block-background-color': '#323232', '--menu-item-color': '#dedede', '--menu-item-hover-color': '#157efb', '--menu-item-alert-bg': '#151513', '--menu-item-alert-shadow': '#151513', '--alert-border-color': '#000', '--tertiary-color:': '#727680' } for(k in darkTheme) { rootElement.style.setProperty(k, darkTheme[k]) } } function activateLightMode() { const rootElement = document.querySelector(':root') const lightTheme = { '--background-color': '#fff', '--page-width': '70em', '--primary-color': '#151513', '--font-color': '#151513', '--subtle-primary-color': '#151513', '--block-background-color': '#f1f3f4', '--menu-item-color': '#000', '--menu-item-hover-color': '#000', '--menu-item-alert-bg': '#ffffff', '--menu-item-alert-shadow': '#dfe1e7', '--alert-border-color': '#dfe1e7', '--tertiary-color:': '#727680' } for(k in lightTheme) { rootElement.style.setProperty(k, lightTheme[k]) } } /** * Sets a color scheme for the website. * If browser supports "prefers-color-scheme" it will respect the setting for light or dark mode * otherwise it will set a dark theme during night time */ function setColorScheme() { const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified; window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode()) window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode()) if(isDarkMode) activateDarkMode() if(isLightMode) activateLightMode() if(isNotSpecified || hasNoSupport) { console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.') now = new Date(); hour = now.getHours(); if (hour < 4 || hour >= 16) { activateDarkMode(); } } } |
Вы готовы к Dark Mode?
Если вы хотите привязать его к Microsoft и не зависеть больше от браузеров, возьмитесь еще и за service workers и манифест (есть здесь кто-нибудь, специализирующийся на Dark Mode?). Почему бы не взломать Dark Mode, добавить его в свой стек навыков, или, по крайней мере, не начать очищать CSS под него.
Автор: Tristram Tolliday
Источник: //itnext.io
Редакция: Команда webformyself.
