Как настроить темный режим работы с CSS

1656544094 kak nastroit temnyj rezhim raboty s css

Фрэнка Леммера

6IhWI0R8fkIDOnLoCUczJbGkbQMjjsbvkUSj
Макет: лёгкий браузер, легкий веб-сайт; темный браузер, темный веб-сайт.

В последнее время играл с темным режимом MacOS Mojave. Это еще не на 100% радует глаза. Но это особенно полезно, когда ботаешь ночью с небольшим освещением.

Темный режим – это тренд дизайна. Во многих чтительных программах (Medium App, Twitter…) это уже есть. Речь идет не только об инвертировании всех цветов, но и о художественном направлении.

7MXofS94AfNVI-oYG-rNDkZ9WH8i-PvyNcUB
В macOS Mojave вы можете сделать свой интерфейс темным. Safari и Firefox уже поддерживают его.

Не все темно (пока)

Одна вещь, которая может немного шокировать во время работы в темном режиме, это вспышка света при открытии документа с большим белым фоном. В этой публикации рассказывается о том, как бороться с темным режимом в Интернете и стилизовать темный режим с помощью CSS.

6vFnrxWHWhxykOVOCl6-jcsMpypqSQpbeNAf
Автор открывает эту среднюю публикацию в темном режиме с небольшим освещением.

Работа с настройками пользователя темного режима

Не было бы хорошо, если бы документы и веб-сайты уважали текущую тему?

Автоматическое цветовое преобразование?

По крайней мере, Safari и Firefox уже имеют «Режим чтения» с поддержкой светлого текста на темном фоне. Здесь контекст

отображается с использованием пользовательских стилей для наилучшей читабельности и удаления беспорядка, а также настройки для инвертирования цветов. Расширяя это, браузеры могут автоматически инвертировать веб-сайты с помощью разумных стилей. Звучит страшно! Но, по крайней мере, Apple Mail уже делает это. Он даже инвертирует цвета для некоторых писем HTML.

kSO148kZlhL9q5FvYT-08ooWX2eZXys6f4jI
OMG, все цвета инвертированы в письме HTML в Apple Mail, macOS Mojave

Разумное инвертирование цветов может быть решением, а может и нет. Что еще?

Медиа-запрос в помощь!

Я не один. Темный режим для CSS сейчас (август 2018 г.) обсуждается в «Черновики редактора рабочей группы CSS». Идея состоит в том, чтобы сделать это доступным в виде медиа-запроса. Кое-что уже попало в Safari (частное), смотрите также здесь.

Итак, теоретически вы можете сделать это:

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

Давайте подождем, пока все браузеры будут готовы. Я думаю, что есть путь к стандартизации. Производителям ОС также может понадобиться что-либо договориться.

Инвертированный не темный режим

K33cTogRj84FtU2LvVq19-VIXMpLli8sEFEs
Интересный факт: вы можете также инвертировать цвета в темном режиме.

Знаете ли вы: в мультимедийных запросах 4 уровня уже есть функция «перевернутых цветов». Это не сродни темному режиму. Своеобразный «темный режим» существует некоторое время. Windows также имеет Высокая контрастность режим. Есть много разных взглядов на это.

Тем не менее, было бы очень круто, если бы авторы веб-сайтов могли решить, как и с этим бороться, когда пользователь с включенным «темным режимом» посетил их сайт. Таким образом, вы как дизайнер имеете полный контроль над тем, как будет выглядеть ваш веб-сайт в «режиме выключенного света». Еще много работы вам? Нет, это просто. Читайте дальше.

Инкогнито не темный режим

C6PA7T3Uj9e0HnFtBfltKMnXvOwLfhS-kVar
Это не темный режим!

Открывая окно в режиме анонимного просмотра для приватного просмотра, многие браузеры отображают темный браузер chrome, чтобы подчеркнуть разницу. Это тоже не черный режим, но черный.

Использование сменных CSS для темного режима

Благодаря «пользовательским свойствам CSS» (также известным как «CSS Vars») мы можем теперь легче, чем когда-либо создавать темы с очень небольшим количеством CSS. Простейшая инвертированная тема:

root: {  --text-color: DarkBlue;  --back-color: Azure;}
body { color: var(--text-color); background: var(--back-color)}
@media (prefers-dark-interface) {  root: {   --text-color: Azure;   --back-color: DarkBlue;  } }

Бесстыдный плагин: мой (прекрасный новый) фреймворк CSS Teutonic CSS уже использует такое простое инвертирование:

2oe6YHeKR513YrwBo3gSPRqppu46nE27OEFj
Поместите «.inverted» во внешний контейнер, чтобы инвертировать все цвета с помощью CSS Vars. Смотрите это в действии здесь.

Веб-сайты, изменяющие браузер Chrome

В этой статье говорится, как настройки пользователя могут изменить внешний вид веб-сайта. Это также работает наоборот: веб-сайт может изменить облик браузера. Есть некоторые собственные мета-теги, доступные пока только для мобильных браузеров:

<meta name="theme-color" content="black"><meta name="msapplication-navbutton-color" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">

АРХ!

Дальнейшие чтения

Статья «ОС: высокая контрастность против инвертированных цветов” Адриана Розелли обсуждает различия между «инвертированным» и «высокой контрастностью» в Windows и macOS.

Статья «Как «инвертировать яркость» может улучшить доступность и помочь нам использовать наши устройства” Мэтью Аткинсона рассказывает о том, как инвертирование цветов помогает улучшить работу пользователя. Вы также можете найти концепцию «умного инвертирования» цвета.

Резюме

hNpXvSYGCgpEBw1FoDrNj0bKDeNCiEAQ1umU
Переключатель день/ночь на страницах разработчиков Microsoft. Приятная деталь: эта настройка постоянна (локальное хранилище или файлы cookie).

Приятно в стандартах то, что у вас есть из чего выбрать.

Хотя «ночной режим» безусловно является тенденцией, разные реализации плавают вокруг. Повысьте свой голос, чтобы сделать этот ОДИН веб-стандарт. Сделайте свой CSS совместимым, чтобы вы могли поддерживать это без лишней суеты.

Добавить комментарий

Ваш адрес email не будет опубликован.