День и ночь в интернете, или открытое письмо веб-разработчикам

Я — веб-разработчик со стажем, и мне приходится подолгу сидеть за компьютером. Поэтому, чтобы к вечеру глаза не уставали, мне пришлось перепробовать все возможные способы снижения нагрузки на зрение — от защитных экранов, специальных очков и упражнений для глаз до различных режимов «eye saver» и прочих манипуляций с настройками монитора.


На мой взгляд, одним из самых эффективных методов борьбы за свое здоровье является выбор темных, или «ночных» тем в настройках операционной системы. Однако, мне постоянно приходится переключаться между текстовым редактором и браузером, и вот тут происходит очень неприятный для зрения эффект.


Как известно, операционная система не позволяет управлять содержимым веб-сайта. Решение о том, как оформить веб-страницу, принимает дизайнер, а не пользователь, и большинство страниц — светлые. Конечно, существуют плагины типа «Dark Reader», которые пытаются решить эту проблему. Но, к сожалению, все они так или иначе искажают содержимое страниц и, кроме того, могут нарушать работу скриптов сайта.


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


Это было последней каплей, и я сказал себе: «все, хватит»! Пусть сам посетитель выбирает, в каком режиме показывать страницу, в соответствии со своими личными предпочтениями.


Дальше было все просто. Техническая реализация идеи заняла у меня максимум пол-дня, включая тесты и размышления о том, где бы в коде лучше разместить переключатель. Я просто вынес все упоминания цвета из основного CSS-файла в файл light.css, потом скопировал его в файл dark.css и изменил некоторые (даже не все) цвета. Вот что получилось в итоге:


image


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


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


Мы ведь делаем сайты для людей, да?

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 15

    +8

    Доброе утро, к счастью всё уже придумали
    https://developer.mozilla.org/ru/docs/Web/CSS/@media/prefers-color-scheme

      +3
      Спасибо огромное!
      Не знал про prefers-color-scheme. Век живи, век учись)
      0
      Согласен с автором, про важность эргономики зрения. От себя вставлю 5 копеек. Когда заходит вопрос про усталость глаз всегда советую следующее:
      1. Не выкручивать яркость монитора. Чем выше яркость, тем легче разобрать мелкие буквы. Но на длительной дистанции лучше сделать шрифт покрупнее.
      2. Избегать солнечных лучей (чтобы солнце не падало на монитор, на пользователя, на предметы перед и за монитором)
      3. Освоить слепую печать. Необходимость постоянно переводить глаза с экрана на клавиатуру — большая дополнительная нагрузка на глаза.
      4. Если позволяют условия, старайтесь работать за крупными мониторами. Это особенно важно ночью. Тогда световой поток будет более равномерным и не будет выжигать середину глаза.
      Вроде бы очевидные вещи, однако такое огромное количество людей не замечают этого, просто диву даешься.
        +1
        3. Освоить слепую печать. Необходимость постоянно переводить глаза с экрана на клавиатуру — большая дополнительная нагрузка на глаза.

        Но с другой стороны, вроде как дополнительная гимнастика, т.к. меняется фокус и работают мышцы, но я не офтальмолог конечно )
          0
          Чтобы от «гимнастики» был толк, предметы должны быть на большом расстоянии. Тут даже квартира недостаточно обширна. В идеале нужно периодически подходить к окну, если оно есть, и желательно, чтобы вид из него был не на стену соседнего здания. Глядя в него, как раз можно заниматься гимнастикой — фокус на раме\стекле — фокус на горизонте (или максимально удаленном объекте).
            0
            Насчет гимнастики. Конечно же, никто не спорит с необходимостью делать перерывы, чтобы одни части тела отдохнули, а другие подвигались. Я всего лишь имел в виду что частый перевод глаз с экрана на клавиатуру означает не только перефокусировку но и частую и быструю смену яркости.
          +1
          В последнее время много про темные темы говорят, но вот мне например темныет темы не нравятся. Наоборот глаза устают, мучался в VS Code, пока не переключил.
          Так что не думайте, что это для всех важно. Наоборот.
            +1
            Так что не думайте, что это для всех важно.

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

              +1
              Безусловно, у темных тем есть свои проблемы, и подходят они далеко не всем. Я лишь акцентирую внимание на фактическом отсутствии возможности управлять содержимым браузеров в современном вебе. А это не правильно.
                0
                Как это? Есть Stylish, Tampermonkey и прочее.
                Во многом я с вами согласен, например одно время дико бесила новая мода на закрепленные панели на сайтах, которые не проматываются (привет яндекс, привет хабр), офигенно это все смотрится на ультраширокоформатном мониторе… Много желчи было выплеснуто в адрес горе-дизайнеров… а потом начал делать для таких сайтов простенькие скрипты на Tampermonkey и проблемы больше нет.
                  +1
                  Мы-то с вами, разработчики, инженеры и администраторы, так или иначе свои проблемы решим. Тут речь про рядовых посетителей, которые не умеют писать скрипты.
                    0
                    А у рядовых пользователей неустанными стараниями ведущих монополистов отрасли, вебдизайнеров, маркетологов и прочих — выученная беспомощность, им всё всё норм. У них даже мысли не возникает о том что вот это вот то что по умолчанию им показывается на экране как-то можно поменять и что это показанное можно сделать удобней для себя, они без раздумий привыкают к тому что дали.

                    Самый убойный пример тому был в одной конторе где я пришел что-то ставить пользователю и первым делом сменил настройки монитора, потому что 800*600 60Гц это ж глаза вытекают. После чего юзерша круглыми глазами глядя на 1024*768 85Гц спросила с искренним удивлением «А что, так можно было?»
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                Не сказал бы что у меня устают глаза, хоть и провожу за экраном большую часть времени, но темными темами пользуюсь уже давно, как-то для меня информация в таком виде усваивается лучше. В Firefox пользуюсь DarkReader, на большинстве сайтов он работает вполне нормально, но на некоторых его приходится отключать, и переход на эти сайты действительно неприятно бьет по глазам, особенно в вечернее время.

                Какое-то время назад на хабре был пост в котором обсуждались темные темы, и я был очень удивлен количеством людей в комментариях, которым не просто удобнее светлая тема, а которые именно против темной, считающих ее «неестественной», излишеством, чуть ли не злом. Конечно это не дает полной картины, но о чем-то таки говорит, поэтому не думаю, что в ближайшем будущем наличие темной темы войдет в «джентльменский набор» для сайтов. С другой стороны темные темы на телефонах и распространение amoled экранов будут стимулировать разработчиков добавлять ее.
                  +1
                  Боюсь, что вы правы. Ожидать заметного прогресса в ближайшем будущем было бы наивно. Если только «mobile first» как-то подстегнет разработчиков… Я же лишь могу лоббировать интересы пользователей в своих проектах.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое