Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 53
Буду пользоваться, автору New Habr: night mode, но обновлений так и не появилось, пришлось отключить стиль.
Спасибо всем, кто приложил к этому творению руку, намного удобнее читать.
P.S. С левой панелью беда — фон прокручивается, при наведении кнопки в панели не полностью подсвечиваются (Firefox Nightly 36).
Спасибо всем, кто приложил к этому творению руку, намного удобнее читать.
P.S. С левой панелью беда — фон прокручивается, при наведении кнопки в панели не полностью подсвечиваются (Firefox Nightly 36).
Спасибо за оценку.
Про левую панель: всё это устроено для того, чтобы на левой панели одновременно можно было видеть и кнопки меню, и номера страниц лент. При невысоком окне кнопки страниц начинают наезжать снизу на кнопки меню (примерно так), но благодаря неполной подсветке они не сильно мешают: справа есть место для нажатия навигации, а слева — для страниц. Не самый лучший выход, но пока придумано на стилях так. Ведь дополнительная фича — это лучше, чем без неё? Кроме того, на официальном сайте есть «беда» (проблема) с меню при высоте окна меньше 530px (улетает наверх), а в этих стилях она решена с адаптивностью до высоты примерно 290. Это тоже было в рамках борьбы за левую панель :).
Про левую панель: всё это устроено для того, чтобы на левой панели одновременно можно было видеть и кнопки меню, и номера страниц лент. При невысоком окне кнопки страниц начинают наезжать снизу на кнопки меню (примерно так), но благодаря неполной подсветке они не сильно мешают: справа есть место для нажатия навигации, а слева — для страниц. Не самый лучший выход, но пока придумано на стилях так. Ведь дополнительная фича — это лучше, чем без неё? Кроме того, на официальном сайте есть «беда» (проблема) с меню при высоте окна меньше 530px (улетает наверх), а в этих стилях она решена с адаптивностью до высоты примерно 290. Это тоже было в рамках борьбы за левую панель :).
Но площадь яркости букв хабов намного меньше сэкономленной площади белого экрана, поэтому расточительство тут довольно маленькое. :) Если серьёзно — то да, этот цвет остался без внимания и его стоит привести к общему дизайну. Приглашаю на пулл-реквесты или хотя бы скриншот желаемого в issue на Гитхабе.
Да, ещё сразу замечу, тоже бросается в глаза — панель кнопок над полем ввода тоже не приведена к общему дизайну, слишком светлая.
Да, ещё сразу замечу, тоже бросается в глаза — панель кнопок над полем ввода тоже не приведена к общему дизайну, слишком светлая.
Так разработка же не в мастере, а в gh-pages.
Это связано xc тем, что на Гитхабе в этой ветке одновременно без проблем можно вести документацию на хостинге статических страниц. Код выложен на userstyles.org.
Сделал такую подсветку хабов (неактивных/активных), и одновременно поправил ключик редактирования:
Это связано xc тем, что на Гитхабе в этой ветке одновременно без проблем можно вести документацию на хостинге статических страниц. Код выложен на userstyles.org.
Сделал такую подсветку хабов (неактивных/активных), и одновременно поправил ключик редактирования:
А разве яркость регулируется попиксельно? Я всю жизнь думал что яркость регулируется для всей матрицы сразу, а пиксели отвечают только за цвет. Так что не важно какого цвета сайт, ночью можно просто выключить яркость на минимум. Ну может ещё flux настроить и всё.
Поддерживаю, тоже было такое соображение. Возможно, речь идет о совсем уже новых дисплеях, полностью LED, без ЖКИ, где таки попиксельно регулируется. Еще читал где-то про то, что яркость подсветки может регулироваться автоматически в зависимости от средней яркости картинки, но это в телевизорах.
Да, вроде бы был телевизор, у которого подсветка была не сплошная, а кусками, и яркость подсветки менялась в нужных местах вместе с изображением.
Но какая-то неясность в этом все-таки есть. Вот у меня на дисплее на рамке сверху написано: «70000:1 Dynamic contrast» — это что означает? 70000, это 16 разрядов на пиксель, минимум. С учетом частоты кадров 75 Гц и количества пикселей 1400х900, получаем скорость передачи 16х75х1400х900=1 512 000 000 бит/с, или более 1.5 Гбит/с даже без учета 3 компонент RGB, просто серое изображение. Вряд ли встроенная видеокарта и стандартный кабель столько смогут. Может быть, я что-то не понимаю?
Они сплошь и рядом такие телевизоры.
Что, вопросы задавать нельзя? У меня есть подозрение, что и в компьютерных дисплеях используют те же технологии повышения контраста, что и в телевизорах.
Специально поставил эксперимент, подключил монитор через амперметр, напряжение выставил на ЛАТРе 110 вольт, чтобы ток побольше был, сделал в Пайнте черный квадрат, развернул на весь экран, потребление было 0.65 А, залил его белым, потребление УПАЛО до 0.6 А. Чтобы проверить не влияют ли отдельные светлые элементы на потребление, сохранил черный квадрат в bmp, открыл в режиме full screen, эффект тот же, потребление растет в случае полностью черного экрана.
Ну правильно, матрица изначально прозрачная, а при подаче напряжения становится непрозрачной. Естественно, что черная матрица жрет больше, чем белая, ибо напряжение подается на все ячейки. Вот для led-экранов это должно иметь смысл. Не считая, конечно,
В торговле нередко «LED-телевизорами» (LED TV) называют телевизоры, имеющие ЖК-экран со светодиодной подсветкой. Несмотря на схожее название, к описываемым в данной статье светодиодным экранам они отношения не имеют.
Вот это дело! А то тоже интересовал вопрос, насколько больше потребляет чёрный экран с ЖК.
Описанная в статье шутка относится, конечно, к OLED-экранам, которых, действительно, немного, и качество их не идеальное (выгорают за год-два).
Описанная в статье шутка относится, конечно, к OLED-экранам, которых, действительно, немного, и качество их не идеальное (выгорают за год-два).
На OLED экранах светятся индивидуальные пикселы. Но такие экраны стоят, на самом деле, в очень небольшом количестве устройств.
После установки какая-то фигня с выделенным на скрине. Или так и должно быть?
Картинки
И кнопки под полем ввода комментария:
И кнопки под полем ввода комментария:
да, на всякий: Windows 10, FF 33.0.2
Может быть, у Вас стоит другое расширение или стиль, которое меняет те же самые цвета. Попробуйте отключить все посторонние.
Разобрался. с userscripts можно установку делать как в плагин Stylish, так и в Greasemonkey — я использовал последний.
Вот ещё: синева в том месте, где всплывающее меню появляется.
По скриншоту — так и должно быть: едва заметные контуры меню подсказывают, куда наводить мышь для перехода в Geektimes или Habrastorage. В то же время, они не занимают места и внимания. Про комментарий выше — я способом через Greasemonkey не пользовался (упоминания про него встречаются). Но вряд ли он будет что-то искажать в стилях.
но ошибка ушла, как только я воспользовался Stylish вместо Greasemonkey — более ничего в настройках я не изменял.
Спасибо за инфу — значит, это — тема, чтобы разобраться в том, насколько неполноценна поддержка в Greasemonkey. Видимо, в нём нарушается очерёдность выставления правил. Так, стили через юзерскрипты имеют несколько другие приоритеты, это приходится учитывать, а тут, видимо, так и сделали — встроенный юзерскрипт, который исполняется не в точке document > head, а где-то в конце документа.
Спасибо за тему!
А есть ли статистика — сколько в мире процентов людей, которым в СВЕТЛОЕ время суток тоже приятнее такие темные темы?
А есть ли статистика — сколько в мире процентов людей, которым в СВЕТЛОЕ время суток тоже приятнее такие темные темы?
Объективно конечно лучше допилить файрфокс, чтобы в нем нормально работало отключение галочки «разрешить страницам использовать свои цвета». И тогда нажатием одной кнопки получаем ночной вид для абсолютно любого сайта. Но к сожалению разработчикам мозиллы чихать на все эти багрепорты… Сейчас если у поля ввода или кнопки указана тень или скругление углов, текст в них рисуется черным вне зависимости от настроек юзера.
Для гуглохрома есть некое расширение (инверсия текста и фона), но оно как-то не так работает с антиалиасингом, тексты при включении инверсии становятся слишком жирными — читать почти нереально, зрение можно потерять за пару дней с ним.
Для гуглохрома есть некое расширение (инверсия текста и фона), но оно как-то не так работает с антиалиасингом, тексты при включении инверсии становятся слишком жирными — читать почти нереально, зрение можно потерять за пару дней с ним.
А разве темная тема потребляет не больше электроэнергии, если речь идет не о AMOLED? Сдается мне у ваших гиков, на устройствах с IPS, батареи сядут немного раньше…
Было бы круто переключаться между светлой и темной темами в зависимости от освещения, подобно iBooks. Например с помощью Ambient Light Events.
html {
filter: hue-rotate(180deg) invert(0.9);
}
// Keep images untouched (invert back)
img {
filter: hue-rotate(180deg) invert(0.9);
}
Close enough ;)
Вот никогда не понимал нафига так делать, это при чтении нужно на каждую картинку мышу наводить чтобы она свои нормальные цвета показала. Мазохизм какой-то.
Об этом где-то тут упоминали: есть расширение Хрома, которое так делает. Но шрифты портит, от таких глаза устают читать. И в Fx не реализовано. Потому я почти все фильтры выпилил из оригинала. И оставшиеся стОит.
Psychosynthesis: с картинкой и наведением — идея от Night Mode. Смысл — в общем приглушении яркости.
Psychosynthesis: с картинкой и наведением — идея от Night Mode. Смысл — в общем приглушении яркости.
Никак не могу найти отчеты исследований, но белый текст на черном значительно хуже читается чем черный текст на белом фоне.
Хороший скриншот, удобный. Только вот в реальности иллюстрации подготавливаются под белый фон.
Как по мне так тема сырая у вас донельзя. Ночная хабра была лучше.
Во первых менюха слева. У меня (FF33, Win7) из под неё фон выезжал при скролле вниз, выглядит ужасно, будто кто-то чего-то недоделал.
Во вторых эта вот синева сверху вместо меню. Стоит проскроллить вниз на строчку, меню это в любом случае пропадает, какой резон его тогда менять на эту синеву? Логичней было бы цвета просто потемнее сделать и всё, внимания она не отнимает особо. А ужасная жёлтая плашка над комментариями? А зелёные выделения комментариев автора? Бррр…
Взял за основу вашу, чуть допилил под себя, теперь норм. Спасибо вам за основу. Если бы тема «Ночной хабр» не съехала из-за появления этой полоски сверху, так и юзал бы её.
Кстати, заметил что у вас в css после свойств, которые стоят перед закрывающими фигурными скобками, почему-то нет точки с запятой. Не то чтобы это было критично, но вроде как синтаксически они должны быть, мой внутренний верстальщик-эстет плачет.
Во первых менюха слева. У меня (FF33, Win7) из под неё фон выезжал при скролле вниз, выглядит ужасно, будто кто-то чего-то недоделал.
Во вторых эта вот синева сверху вместо меню. Стоит проскроллить вниз на строчку, меню это в любом случае пропадает, какой резон его тогда менять на эту синеву? Логичней было бы цвета просто потемнее сделать и всё, внимания она не отнимает особо. А ужасная жёлтая плашка над комментариями? А зелёные выделения комментариев автора? Бррр…
Взял за основу вашу, чуть допилил под себя, теперь норм. Спасибо вам за основу. Если бы тема «Ночной хабр» не съехала из-за появления этой полоски сверху, так и юзал бы её.
Кстати, заметил что у вас в css после свойств, которые стоят перед закрывающими фигурными скобками, почему-то нет точки с запятой. Не то чтобы это было критично, но вроде как синтаксически они должны быть, мой внутренний верстальщик-эстет плачет.
исходники этой темы лежат в GitHub — почему вы туда же свои доработки не отдадите?
Отлично! Сделайте, пожалуйста, нам пулл-реквест 
(вначале, конечно, нужно обсудить где-то). Я тоже все эти недостатки вижу, но на реализацию нужно время. При коллективной разработке мы сделаем эту тему ещё лучше. Например,
1) синеву в Geektimes-меню я придумал, потому что чёрный уже сам фон. Если выделять, то или светлым. или другим цветом. А Fixed его делать совсем нет смысла, т.к. нечасто используется. Даже для левого меню я предпочитаю 3 fixed-кнопки, как сделано в ZenComment.
2) меню слева — причины описал выше, фон связан с div.footer_panel:before, и body:after, ради кнопок навигации с ними надо что-то делать, фон выставлять иначе.
3) плашка перед комментами — визуальный разделитель статьи и комментов. Когда быстро скроллишь, нужно увидеть конец статьи, чтобы увидеть подпись и не прокрутить ниже. Предложите решение лучше. Серьёзно.
4) отсутствие ";" пришло из времени жёсткой экономии размера файла для userstyles.org (больше 60К или 65) не давали сделать. Но логика есть: "}" работает и без того как разделитель.
5) ваш форк на Гитхабе был бы всем полезен — как альтернатива (например, Вы вернули кнопки назад и восстановили фон левого меню) и как источник и пример решений.
6) ещё упомяну, уже в 3-м месте: панель кнопок над полем ввода. Взялся бы кто-то сделать её темнее… Тут надо и по-дизайнерски цвет иконок на тёмном выбрать. Например, цвета 666, а то и 444. Там много работы с картинками из-за этого, но за вечер сделать легко (поправил сейчас фон «html-теги» на 444 + текст).
(вначале, конечно, нужно обсудить где-то). Я тоже все эти недостатки вижу, но на реализацию нужно время. При коллективной разработке мы сделаем эту тему ещё лучше. Например,1) синеву в Geektimes-меню я придумал, потому что чёрный уже сам фон. Если выделять, то или светлым. или другим цветом. А Fixed его делать совсем нет смысла, т.к. нечасто используется. Даже для левого меню я предпочитаю 3 fixed-кнопки, как сделано в ZenComment.
2) меню слева — причины описал выше, фон связан с div.footer_panel:before, и body:after, ради кнопок навигации с ними надо что-то делать, фон выставлять иначе.
3) плашка перед комментами — визуальный разделитель статьи и комментов. Когда быстро скроллишь, нужно увидеть конец статьи, чтобы увидеть подпись и не прокрутить ниже. Предложите решение лучше. Серьёзно.
4) отсутствие ";" пришло из времени жёсткой экономии размера файла для userstyles.org (больше 60К или 65) не давали сделать. Но логика есть: "}" работает и без того как разделитель.
5) ваш форк на Гитхабе был бы всем полезен — как альтернатива (например, Вы вернули кнопки назад и восстановили фон левого меню) и как источник и пример решений.
6) ещё упомяну, уже в 3-м месте: панель кнопок над полем ввода. Взялся бы кто-то сделать её темнее… Тут надо и по-дизайнерски цвет иконок на тёмном выбрать. Например, цвета 666, а то и 444. Там много работы с картинками из-за этого, но за вечер сделать легко (поправил сейчас фон «html-теги» на 444 + текст).
Вот что у меня получилось. Выложил на JSfiddle (первое что в голову пришло).
jsfiddle.net/4j68ac78/2/
Тут не всё идеально, конечно (в частности как раз с верхней панелькой не стал заморачиваться). Но лично меня такой вариант вполне устраивает.
jsfiddle.net/4j68ac78/2/
Тут не всё идеально, конечно (в частности как раз с верхней панелькой не стал заморачиваться). Но лично меня такой вариант вполне устраивает.
Вот ещё одна правка, буквально только что заметил — если в посте или комментах используется изображение с прозрачностью, то на чёрном фоне всё часто выглядит печально.
В качестве топорного решения добавил всем img белый фон. Выглядит норм.
jsfiddle.net/4j68ac78/4/
В качестве топорного решения добавил всем img белый фон. Выглядит норм.
jsfiddle.net/4j68ac78/4/
Получил, смотрю.
1) левая панель. Тут выброшена масса доработок: адаптивность и вообще присутствует проблема «530px высоты». За счёт body:after решён вопрос с гуляющим бекграундом — хорошо, надо сделать подобное. Но имеется постоянная нижняя полоса прокрутки (это причина — над футером). Панель, на мой взгляд, слишком светлая, надо #444 или слияние с фоном. Подсветка — тоже.
2) разделитель — норм. Думаю, удалю свой жёлтый фон, сделав в светло-серых тонах (он вообще из палитры выпадает, но надо было что-то ставить).
3) шапки комментов авторов — да, синие более гармоничны, но там я не стал трогать наработки Night Mode, эти цвета (зелёный) идут оттуда.
4) IMG. А почему img { background-color: #fff}, а не 333? Потому что большинство картинок заточено под белый фон? Но это проблемы картинок и их авторов. Сразу видна некачественность полутеней :)
Итого:
1) вернуться к нерешённым проблемам не готов, выбросить наработки Dark Mode (их images) — тоже, но на днях буду смотреть, как решить вопрос подложки, не потянув за ней всё остальное. Это лейаут, с ним надо всё заново тестировать. За пример решения — спасибо, вижу, что кнопки не конфликтуют с номерами страниц. Но серьёзная проблема, что они их покрывают, когда низкие окна. При экране на 768 даже проблема 530px серьёзна. Как вариант видится — сделать как у меня, но номера страниц — справа, кнопки слева с половинной подсветкой. (Да и вообще, гигантские кнопки для десктопов — зло, решение вижу, как у ZenComment.)
2) делаю в серой палитре (но не чёрный бордюр);
3) что-то изменю по 6 видам шапок (свои, новые, свои-новые, авторские, авторские-новые), это тоже не сейчас, нужен свежий взгляд;
4) не вижу оснований.
В общем, спасибо за правки, но большая разница во взглядах на панель приведёт к разным темам. И сегодня я сделал 4-5 правок полезных мелочей, советую обновить ваш вариант, посмотрев диффы.
1) левая панель. Тут выброшена масса доработок: адаптивность и вообще присутствует проблема «530px высоты». За счёт body:after решён вопрос с гуляющим бекграундом — хорошо, надо сделать подобное. Но имеется постоянная нижняя полоса прокрутки (это причина — над футером). Панель, на мой взгляд, слишком светлая, надо #444 или слияние с фоном. Подсветка — тоже.
2) разделитель — норм. Думаю, удалю свой жёлтый фон, сделав в светло-серых тонах (он вообще из палитры выпадает, но надо было что-то ставить).
3) шапки комментов авторов — да, синие более гармоничны, но там я не стал трогать наработки Night Mode, эти цвета (зелёный) идут оттуда.
4) IMG. А почему img { background-color: #fff}, а не 333? Потому что большинство картинок заточено под белый фон? Но это проблемы картинок и их авторов. Сразу видна некачественность полутеней :)
Итого:
1) вернуться к нерешённым проблемам не готов, выбросить наработки Dark Mode (их images) — тоже, но на днях буду смотреть, как решить вопрос подложки, не потянув за ней всё остальное. Это лейаут, с ним надо всё заново тестировать. За пример решения — спасибо, вижу, что кнопки не конфликтуют с номерами страниц. Но серьёзная проблема, что они их покрывают, когда низкие окна. При экране на 768 даже проблема 530px серьёзна. Как вариант видится — сделать как у меня, но номера страниц — справа, кнопки слева с половинной подсветкой. (Да и вообще, гигантские кнопки для десктопов — зло, решение вижу, как у ZenComment.)
2) делаю в серой палитре (но не чёрный бордюр);
3) что-то изменю по 6 видам шапок (свои, новые, свои-новые, авторские, авторские-новые), это тоже не сейчас, нужен свежий взгляд;
4) не вижу оснований.
В общем, спасибо за правки, но большая разница во взглядах на панель приведёт к разным темам. И сегодня я сделал 4-5 правок полезных мелочей, советую обновить ваш вариант, посмотрев диффы.
Ну я не настаиваю, я юзаю данную тему вообще только на домашнем мониторе и, естественно, не ради экономии энергии, а просто чтобы читать было менее напряжно.
Прокрутку снизу я почему-то даже и не заметил поначалу, потыкаю чуть попозже, может решу косяк этот.
А картинки вы правы, оставил белый именно из-за того что они заточены под белый. Я понимаю что это «проблемы авторов», но думаю это нормальный вариант, так как основная масса картинок всё же непрозрачная, а те, в которых есть прозрачность затемняются темой автоматом и глаз не режут пока не наведёшь на них указатель. Да и авторы свои «проблемы» явно решат не раньше чем я смогу это поправить =)
Прокрутку снизу я почему-то даже и не заметил поначалу, потыкаю чуть попозже, может решу косяк этот.
А картинки вы правы, оставил белый именно из-за того что они заточены под белый. Я понимаю что это «проблемы авторов», но думаю это нормальный вариант, так как основная масса картинок всё же непрозрачная, а те, в которых есть прозрачность затемняются темой автоматом и глаз не режут пока не наведёшь на них указатель. Да и авторы свои «проблемы» явно решат не раньше чем я смогу это поправить =)
Автору (авторам) спасибо большое. Тему поставил, очень понравилась )
23 вечера, в полной темноте читал хабр перед сном. После установки темы я сразу же почувствовал как напряжение и неприятные ощущения в глазах во время чтения спали. Спасибо за стиль =)
За прошедшие 3 дня было сделано 10-12 мелких доработок, с постепенно уменьшающейся частотой.
* цвета на страницах помощи (сслылка — в футере);
* приглушение яркостей чекбоксов на редкопосещаемых страницах;
* приглушение картинки, которая в начале ссылки на юзера (
);
* приведение некоторых цветов к общей палитре;
* ослабление яркости подсветок новых и авторских комментариев ( spmbt.github.io/haPages/doc/habraDarkAge/habraDarkAgeCommentsBgColors.png );
* рзделитель статьи и комментов заменён с жёлтого на серый;
* даты стали зелёными по всему сайту;
* правое форматирование хабов, тегов и дат статей;
* на страницах компаний стала заполняться правая панель; баг сайт висячей панели там исправлен;
* ZenComment получил иконку Гиктайма, а HabrAjax стал показывать «Лучшие» Хабра при нахождении на Гиктайме.
Критичных доработок не было, т.к. до публикации стили неделю отлаживались, но с текущими изменениями они стали ещё удобнее. Кроме того, запланированы и со временем будут те доработки, которые обозначены на странице хостинга юзерстией HabraDarkAge.
* цвета на страницах помощи (сслылка — в футере);
* приглушение яркостей чекбоксов на редкопосещаемых страницах;
* приглушение картинки, которая в начале ссылки на юзера (
);* приведение некоторых цветов к общей палитре;
* ослабление яркости подсветок новых и авторских комментариев ( spmbt.github.io/haPages/doc/habraDarkAge/habraDarkAgeCommentsBgColors.png );
* рзделитель статьи и комментов заменён с жёлтого на серый;
* даты стали зелёными по всему сайту;
* правое форматирование хабов, тегов и дат статей;
* на страницах компаний стала заполняться правая панель; баг сайт висячей панели там исправлен;
* ZenComment получил иконку Гиктайма, а HabrAjax стал показывать «Лучшие» Хабра при нахождении на Гиктайме.
Критичных доработок не было, т.к. до публикации стили неделю отлаживались, но с текущими изменениями они стали ещё удобнее. Кроме того, запланированы и со временем будут те доработки, которые обозначены на странице хостинга юзерстией HabraDarkAge.
Спасибо, здорово :)
Поставил HabraDarkAge с сайта — в Safari какой-то ад начинает творится с мигающим текстом, когда над ним курсор. Это нормально?
В Safari ставить и проверять не доводилось, под него, соответественно, не разрабатывалось вообще. Эффект, конечно, ненормальный. Посмотрев, в чём дело — это классический бич наложенных стилей: на сайте ввели элементы с похожими классами footer_panel, к которым очень чувствителен данный юзерстиль. Исправлено в очередной версии 430, поэтому спасибо за своевременное замечание (это же и в Хроме в Windows оказалось с какого-то времени).
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Наступают тёмные времена: тема HabraDarkAge