Тема для ночного чтения Habrahabr

    Добрый день, хабражители!
    Долгое время меня волновала проблема ночного чтения habrahabr: я мешал жене спать, да и глаза быстро устают в темноте читать белый сайт. Я сделал несколько попыток создать ночную темную тему для habrahabr и она выполняла свою функцию, но не была достаточно качественной для того, чтобы отдавать ее в общий доступ — все-таки верстка сайта была весьма консервативной и плохо поддавалась аккуратному рестайлингу.

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



    В процессе подключился пользователь extempl, и на двоих у нас получилась вполне пригодная для использования ночная тема, исходники которой опубликованы на Github, а сама тема опубликована на userstyles.org и периодически обновляется до свежей версии из репозитория.

    Основной фишкой темы можно считать использование модных css-фильтров для понижения контрастности изображений и видеороликов. Оригинал изображения выводится при наведении на него курсором мыши. Это удобно и красиво. Теперь и днем пользуюсь этой темой!

    Тема может быть установлена в большинство актуальных браузеров при помощи расширения Stylish. Для установки с помощью Stylish необходимо просто зайти на обозначенную выше страницу на userstyles.org и нажать большую привлекательную кнопку.

    Приглашаю пользоваться. Если вы нашли коробящие вас недоработки или у вас появились идеи для улучшения — я жду ваших pull-request'ов на Github!

    UPD: стиль обновлен для корректного отображения иконок в браузерах Firefox и Opera. Обновить установленный стиль можно точно так-же, как вы его усановили — со страницы стиля.

    UPD2: к великому сожалению пользователи браузера Firefox (и, вероятно, Opera <=12.*) пока еще не могут оценить эффект css-фильтров.

    UPD3: стиль снова обновлен, актуализация под обновившуюся верстку плюс поддержка geektimes. Из важного: удалены все транзиции и css-фильтры, т.к. они приводили к частым ошибкам рендеринга, делая пользование юзерстилем невозможным.

    UPD4: со временем верстка хабра и его сайд-проектов эволюционирует и становится лучше, что не может не радовать.
    Актуализация под новые элементы и добавлен мегамозг. Скоро добавлю tmfeed.
    Из приятного — вернулись фильтры и транзиции — глаза благодарят.

    UPD5: Благодаря огромному труду extempl стиль был портирован на Stylus, по пути исправлено множество косяков — обновляйтесь и присоединяйтесь к улучшению!

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 54

      +3
      Как то раньше нравились сайты в тёмных тонах, а сейчас совсем не перевариваю. Как только начинаю читать белый текст на чёрном фоне — глаза моментально начинают уставать (с зелёным на чёрном ещё хуже). Обычно просто уменьшаю яркость подсветки до минимальной, либо стараюсь закончить все дела пока в комнате ещё горит свет.
        0
        С возрастом я тоже стал понижать яркость до минимально комфортного значения, но ночью это помогает в значительно меньшей степени — и комната освещена, и уже ничего не видишь на экране.
          0
          У меня постоянно яркость монитора на 10% и темы в IDE типа Dracula, благо они родственные от JetBrains ) Это спасает но только частично — как правильно подмечено, в вебе прямо вырви глаз… Жаль только что не только хабр читаю по ночам.
          +1
          У меня даже букмарклет висит, древний ещё, который по всему документу фон заменяет на белый, а текст делает черным. Эти ваши ЛОРы читать самое оно.
            0
            На ЛОРе можно скин на светлый изменить в настройках.
          +2
          Использую плагин для хрома Hacker Vision
          Он инвертирует цвета на всех сайтах через простой css-фильтр. Иногда, конечно, делает темные сайты белыми, а синие желтыми, но такие можно занести в список исключений.
            0
            Я пытался им пользоваться, но не смог.
            Хотя кому-то возможно и понравится, т.к. похоже на CGA-палитру из древних бородатых времен :)
              +1
              В Mac Cmd+Alt+Ctrl+8
                0
                По умолчанию этот хоткеей вроде отключен. Иначе бы я только и развлекался что подбегал к людям с маками и прожимал его.
                0
                Спасибо Вам огромное, не знал об этом плагине. Мои глаза отдыхают ;)
                  0
                  Есть ещё вот такое чудо — High Contrast chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph суть примерна такая же, но данный плагин ещё и картинки корректирует при просмотре.
                  +9
                  Рекомендую f.lux.
                  Программа изменяет цветовой профиль монитора, в зависимости от времени суток. Ночью глаза меньше устают от тёплых цветовых тонов (3400 K), днём — от холодных (6500 K), которые больше соответствуют дневному свету.

                  Скрытый текст
                  image
                  • UFO just landed and posted this here
                      +2
                      Согласен с вами полностью. Это первое приложение которое ставлю на свеже переустановленную систему. Особо радует плавный переход цветовых температур по времени.
                        +3
                        В CSS, ксатти, есть интересный API — media queries для разного освещения.
                        +1
                        Вот несколько мест, которые выбиваются из общего стиля и режут глаз очень сильно
                        habrastorage.org/files/d48/b1f/bf7/d48b1fbf77ce462a80db229115449d64.png
                        habrastorage.org/files/b3b/17f/a36/b3b17fa36d9645568d04be0ba3433725.png

                        PS: не могу вставить картинки :(
                          +2
                          Firefox 33
                          1) беда со звездами
                          image
                          2) Беда с кнопками редактирования
                          image
                            +1
                            Та же фигня в опере12
                              0
                              lolipop будем фиксить… Видимо селекторы по тайтлу не отрабатывают.
                              datacompboy какая версия оперы?
                                0
                                lolipop datacompboy — обновил юзерстиль, обновляется точно так же как и устанавливается. Проверьте иконки!
                                  0
                                  починилось, спасибо.
                              +3
                              Тема отличная! Вот только звезды полетели, у редактора все кнопки послетали. Но это всё фигня, в целом стало намного лучше, что с этим можно жить.
                                +1
                                Будем фиксить!
                                  0
                                  звездочка добавления в закладки в желтом виде на 1 пиксель ниже, чем в белом виде.
                                  Справа от комментов ОБЕ стрелки вверх, но при наведении первая становится вверх, вторая вниз.
                                  Причем после голосования они фиксируются в нормальном виде.
                                  а, у поста тоже комментные стрелки до голосования обе вверх, после голосования всё норм
                                    0
                                    Стрелки исправлены
                                    0
                                    В профиле пользователя стрелочки кармы на белом фоне.
                                      0
                                      На данный момент стрелки в профиле сделаны в цвет с помощью CSS-фильтра, который не работает в вашем браузере :(
                                      Надо перерисовывать.
                                • UFO just landed and posted this here
                                    0
                                    Спасибо, действительно удобно.

                                    Касательно эффектов по наведению — в идеале бы хотелось две версии, ибо на планшете наводить на картинку не очень удобно.

                                    Хотя пока писал понял что на планшете IE, но всё-таки таких мало, поэтому пожелание оставлю.
                                      0
                                      На айпаде постоянно пользуюсь тройным нажатием на кнопку Home (мгновенно инвертирует цвета, функция включается в настройках). Причем это удобно не только в браузере, а в любом приложении.

                                      Могу посоветовать поискать что-то подобное на вашем планшете
                                      +3
                                      Habra Darcula :)
                                        0
                                        Вы правы, darcula местами была взята за основу, например, при подсветке кода
                                        0
                                        Отлично.
                                          0
                                          А тихую мышь может кто посоветует? Только из тех, что сейчас продаются.
                                            +1
                                            Хотя по моему убеждению мышь должна кликать, коллега купил образчик бесшумной мыши A4Tech OP-200Q и весьма ею доволен. Звук клика отсутствует напрочь.
                                              0
                                              Я тоже ее хотел купить, но не нашел в наших краях. Старая модель.
                                            0
                                            Может стоит сделать чтобы менялась тема от времени суток? а то ночная тема днем — не самое логичное, а вручную отключать — тоже не круто
                                              0
                                              по датчику освещённости бы, ммм…
                                              0
                                              А я цветовую палитру матрицы инвертирую по кнопке. Просто и надежно.
                                                0
                                                чем это под линупсами можно сделать?
                                                и как при этом бороться с теми, кто раньше был темным? :)
                                                  0
                                                  valdikss@valaptop ~/Documents % cat invert.sh 
                                                  #!/bin/sh
                                                  INVERTEDFILE=/run/user/$(id -u)/inverted
                                                  if [ -a $INVERTEDFILE ];
                                                  then
                                                  xcalib /home/valdikss/Documents/thinkpadIPSrev2.icm
                                                  rm $INVERTEDFILE
                                                  else
                                                  xcalib -i /home/valdikss/Documents/thinkpadIPSrev2.icm
                                                  touch $INVERTEDFILE
                                                  fi


                                                  Назначил этот скрипт на физическую кнопочку ThinkVantage
                                                  image
                                                  Очень удобно.
                                                    0
                                                    а откуда взяли icm'ки?
                                                    и блин, вот на предыдущем была такая кнопка, а на новом нету )) но всегда можно на Fn+чтонибудь повесить.
                                                      0
                                                      icm упер откуда-то, не помню. Из темы на ixbt, наверное.
                                                        0
                                                        Спасибо!
                                                        Но пользовать не смогу — у меня в целом тема экрана тёмная, после инверсии начинается лажа :D
                                                0
                                                Как включить? Плагин поставил, дальше куда кнопать?
                                                  0
                                                  Как и написано в посте — сто страницы на userstyles.org. Скоро она претерпит большие и приятные изменения.
                                                  0
                                                  Такая штука очень пригодилась бы в мобильном приложении хабра!
                                                    0
                                                    Поддержу, но ничем помочь не могу :)
                                                      0
                                                      Настройки -> Оформление и интерфейс -> Цветовая схема -> Тёмная, нет?
                                                      0
                                                      Пользователи браузера Firefox могут оценить градации серого на картинках вот так вот codepen.io/t0H/pen/zHarx
                                                      по крайней мере у меня это работает)
                                                        0
                                                        UPD3: стиль снова обновлен, актуализация под обновившуюся верстку плюс поддержка geektimes. Из важного: удалены все транзиции и css-фильтры, т.к. они приводили к частым ошибкам рендеринга, делая пользование юзерстилем невозможным.
                                                          0
                                                          UPD4: со временем верстка хабра и его сайд-проектов эволюционирует и становится лучше, что не может не радовать.
                                                          Актуализация под новые элементы и добавлен мегамозг. Скоро добавлю tmfeed.
                                                          Из приятного — вернулись фильтры и транзиции — глаза благодарят.
                                                          userstyles.org/styles/101604/new-habr-night-mode

                                                          Не могу дополнить текст статьи — карма ниже 5 баллов.
                                                            0
                                                            UPD5: Благодаря огромному труду extempl стиль был портирован на Stylus, по пути исправлено множество косяков — обновляйтесь и присоединяйтесь к улучшению!
                                                              0
                                                              Внимание, кто использует стиль как зависимость: переименовал юзернейм на github, теперь iamwavecut/habrahabr.ru_night-mode

                                                              Only users with full accounts can post comments. Log in, please.