Ночная тема на сайте

Любители почитать перед сном каждый раз ослепляют себя яркими страницами сайтов, владельцы которых плевать хотели на UI и UX. Их сайт все тот же, что и 10 лет назад: белый фон и черные контрастные буквы.

Ночной режим в тренде

Все популярные сайты получили возможность работы в режиме светлого текста на темном фоне. YouTube, Pikabu, приложения для чтения с Medium и Twitter… Не пора ли подхватить тренд и запилить себе такую фичу?

Ночная тема оформления касается не только сайтов. В ОС Mojave также встроен такой режим. Он все еще не идеален, но все же. Если вспомнить, что было раньше, то и на Windows (еще со времен Windows95) были режимы повышенной контрастности, которые отличались вырвиглазными сочетаниями цветов, но на выцветшем ЭЛТ мониторе смотрелось вполне себе. Это были предшественники ночного режима, и вот, в наше время, все хорошо забытое вновь заиграло новыми красками.

Для кого?

В первую очередь, ночной режим просто необходим при чтении с жидкокристаллического (LCD и вариации) дисплея в ночное время суток. При классическом белом фоне с черным буквами на нем, как не уменьшай яркость экрана, глаза очень быстро устают. Если на сайте есть статьи, которые читают, а не заметки в два слова, заточенные под поиск, нужно вводить современные технологии.

Варианты внедрения

Для тех, кто не ищет легких путей, самый простой путь — сразу установить на сайт темную тему. Днем читать будет неудобно: придется держать подсветку на максимуме и все равно напрягать зрение, чтобы рассмотреть буквы. К тому же, львиную долю энергии аккумулятора гаджета тратит именно подсветка экрана, и если держать ее на максимуме, то это плохо отразится на автономности устройства.

Оптимальным решением будет добавить на сайт кнопку переключения режимов. Днем обычная тема, ночью (по желанию пользователя, в зависимости от освещения) можно будет включать ночную тему.

Конечно, существуют плагины для браузеров, которые принудительно перекрашивают сайты, но такой вариант нам не подходит. Или вы будете просить пользователей установить дополнение к хрому?

Техническая сторона

Можно схитрить и инвертировать весь сайт с помощью CSS:

body {
filter: invert(100%);
}

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

Чтобы максимально улучшить UI, мы рекомендуем добавить еще один стиль оформления CSS и переключать его с помощью JS. Данный вариант идеален в плане полного управления цветом: можно сбалансировать все аспекты и предоставить пользователю адекватный режим для чтения вечером, от которого не устают глаза. В качестве примера, на нашем сайте с недавнего времени появилась кнопка “Dimm Lights” для удобства чтения.

Для всех сайтов это будет индивидуальное решение, плагина для вордпресс не существует (только темы с переключением). Если вы хотите добавить такую фичу на сайт, не меняя темы, то доступен только вариант с дополнительными стилями. Если же вы не сильны в фронтэнде, то просто пишите нам. Наши специалисты по внедрению фич самые опытные, выполнят работу в срок и качественно, ну, и все прочие слова, которые вы читаете в любом рекламной объявлении.

Для связи тележка

Мыло

или обратная связь на морде сайта.