Я — веб-разработчик со стажем, и мне приходится подолгу сидеть за компьютером. Поэтому, чтобы к вечеру глаза не уставали, мне пришлось перепробовать все возможные способы снижения нагрузки на зрение — от защитных экранов, специальных очков и упражнений для глаз до различных режимов «eye saver» и прочих манипуляций с настройками монитора.
На мой взгляд, одним из самых эффективных методов борьбы за свое здоровье является выбор темных, или «ночных» тем в настройках операционной системы. Однако, мне постоянно приходится переключаться между текстовым редактором и браузером, и вот тут происходит очень неприятный для зрения эффект.
Как известно, операционная система не позволяет управлять содержимым веб-сайта. Решение о том, как оформить веб-страницу, принимает дизайнер, а не пользователь, и большинство страниц — светлые. Конечно, существуют плагины типа «Dark Reader», которые пытаются решить эту проблему. Но, к сожалению, все они так или иначе искажают содержимое страниц и, кроме того, могут нарушать работу скриптов сайта.
И вот, во время работы над одним из проектов, мне написал наш главный редактор и попросил использовать темную тему, ссылаясь на то, что от светлой у него болят глаза. Но в проекте публикуется, в том числе, детский контент, поэтому сделать это было никак нельзя.
Это было последней каплей, и я сказал себе: «все, хватит»! Пусть сам посетитель выбирает, в каком режиме показывать страницу, в соответствии со своими личными предпочтениями.
Дальше было все просто. Техническая реализация идеи заняла у меня максимум пол-дня, включая тесты и размышления о том, где бы в коде лучше разместить переключатель. Я просто вынес все упоминания цвета из основного CSS-файла в файл light.css, потом скопировал его в файл dark.css и изменил некоторые (даже не все) цвета. Вот что получилось в итоге:
main.py: async def create_app(): ... jinja_setup( app, context_processors=[BaseHandler().context_processor]) views.py: class BaseHandler: async def context_processor(self, request): ... return { 'theme': 'dark' if request.cookies.get('theme') == 'dark' else 'light'} base.html: <head> ... <link rel="stylesheet" href="{{ static_root_url }}/css/{{ theme }}.css"> </head> <body> ... <div class="nav-block nav-item nav-theme"> {% if theme == 'dark' %} <a href="javascript:void(0)" class="js-theme" data-theme="light"> Дневной режим </a> {% else %} <a href="javascript:void(0)" class="js-theme" data-theme="dark"> Ночной режим </a> {% endif %} </div> ... </body> base.js: ... $('.js-theme').on('click', function () { $.setCookie('theme', $(this).data('theme')); location.reload(); });
Как видите, достаточно было просто разместить на видном месте кнопку «Ночной режим», которая выбирает нужный файл цветовой схемы. Это оказалось удобно, и благодарности не заставили себя ждать.
А теперь давайте помечтаем о том, как это могло бы быть, если бы было веб-стандартом. Предположим, в настройках ОС одним из первых пунктов идет что-то вроде «Look and feel», который предоставляет выбор между темными и светлыми темами. ОС передает эту настройку браузеру, а тот, в свою очередь, веб-странице. Адаптивный сайт (или, если угодно, ресурс с персонализированным интерфейсом), получив такую инструкцию, должен отреагировать на нее переключением цветовой схемы и предоставить посетителю выбор: использовать текущую схему или переключить «день» на «ночь» (или наоборот).
И в заключение: уважаемые коллеги-разработчики, давайте будем уважать себя и наших пользователей и начнем внедрять подобные решения в наших проектах уже сейчас! Это совсем не сложно.
Мы ведь делаем сайты для людей, да?
ссылка на оригинал статьи https://habr.com/ru/post/513162/
Добавить комментарий