Я — веб-разработчик со стажем, и мне приходится подолгу сидеть за компьютером. Поэтому, чтобы к вечеру глаза не уставали, мне пришлось перепробовать все возможные способы снижения нагрузки на зрение — от защитных экранов, специальных очков и упражнений для глаз до различных режимов «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», который предоставляет выбор между темными и светлыми темами. ОС передает эту настройку браузеру, а тот, в свою очередь, веб-странице. Адаптивный сайт (или, если угодно, ресурс с персонализированным интерфейсом), получив такую инструкцию, должен отреагировать на нее переключением цветовой схемы и предоставить посетителю выбор: использовать текущую схему или переключить «день» на «ночь» (или наоборот).
И в заключение: уважаемые коллеги-разработчики, давайте будем уважать себя и наших пользователей и начнем внедрять подобные решения в наших проектах уже сейчас! Это совсем не сложно.
Мы ведь делаем сайты для людей, да?
