Привет, Хабр! Мы приготовили для вас долгожданный подарок (из заголовка вы уже поняли, какой), но мы вам его просто так, как говорится, не отдадим ?
TL;DR для нетерпеливых: переходите на dark.habr.io и следуйте инструкциям
Как мы делали тёмную тему
У вас бывает такое, что устали и ни на что уже нет сил, но вдруг открывается второе дыхание и вы способны сделать марш‑бросок, перевернуть горы?! У нас в компании к концу года такое периодически случается. И нет, речь не о горящих дедлайнах и попытках доделать всё недоделанное. Мы обычно берём и хакатоним что‑то — вдобавок ко всему тому, что и так делаем. Так, например, в конце декабря был реанимирован и запущен АДМ. Похожим образом отдел разработки сделал Чёрные списки, которые мы анонсировали в конце марта. А ещё мы решили захакатонить — ни много, ни мало — тёмную тему! Ту самую, которую вы просили сделать чуть ли не с момента появления Хабра. Ту, которую многие энтузиасты пытались создать через userCSS и прочие расширения. Ту, которую мы теперь официально внедряем на Хабр и будем поддерживать.
Немного предварительных ласк о том, как мы устроили тёмную пользователям Хабра:
Сергей
Продакт всея Хабра
То, что тёмная тема нужна, я понимал не как продакт, а как один из пользователей Хабра. У меня самого болели глаза вечерами, но ничего не поделаешь, работа есть работа. А у меня ещё и есть некоторые проблемы со светлыми интерфейсами — глаза очень чувствительны к яркому свету, так что 24/7 nightmode на всех мониторах — это прям моё. В общем, тёмная тема была в том числе моей личной болью и целью, одной из больших вех работы в Хабре и над Хабром.
Подходить к тёмной теме мы долгое время боялись, поскольку Хабр настолько огромный, что не то что поддерживать, а сделать её без косяков не представлялось возможным. А ещё и «старый Хабр», с которым тёмная тема вообще была чем‑то из области фантастики (учитывая сложность разработки и поддержки), на что бизнес не был готов тратить деньги. Так что подступались осторожно и издалека.
В 2023 мы, наконец, системно подошли к решению этой проблемы, начав работать над общей цветовой палитрой всех сервисов, что открывало возможность сделать для Хабра вторую палитру, тёмную. И всё бы хорошо, но приоритет у этой задачи на 2023 год был не самый высокий и её приходилось отодвигать на второй план в угоду более важным фичам и проектам. К декабрю 2023 палитра была готова примерно на 50%, что не оставляло надежд на релиз в уходящем году. Одним декабрьским вечером случилось очередное локальное «доколе» — после стендапа мы остались с дизайнером и разработчиком, чтобы обсудить и прикинуть, что мы можем сейчас сделать и какие трудности предстоит преодолеть. Решили, что на MVP нам нужно недели две — но были сильно ненулевые шансы, что на выходе будет большая куча багов и катить это в прод будет нельзя, но по крайней мере, это будет отправной точкой, после которой задний ход уже не дать. На том и порешили.
Степан
Чёрный пояс по дизайну, человек-борода
Наша работа над дизайн‑системой началась давно, каждый раз мы пытались приступить к ней, но что‑то всегда становилось на пути: от событий в мире до более важных коммерческих задач — они просто не давали нам вдумчиво сесть и поработать над сайтом. Но в середине 2023 года мы поймали себя на мысли, что времени никогда не бывает достаточно, поэтому просто нужно взять и начать. Не совру, если скажу, что работы там был вагон и маленькая тележка: одних только цветов на сайте и в макетах было более 300! Многие из них были так похожи друг на друга, что иногда даже дизайнеры сами терялись, где использовать тот или иной цвет. Благодаря нашим усилиям и куче экспериментов удалось сократить палитру в несколько раз, до 40 цветов. И, что самое важное, составили таблицу перехода цветов для разработчиков, чтобы всё было как по маслу.
На одном из декабрьских стендапов наш продакт Сергей в очередной раз грустно вздохнул, что у нас нет тёмной темы, а пользователи всё просят и просят. Я подумал: «Мы же теперь можем сделаем это относительно быстро!». Оказалось, что фронтенд‑разработчики с нами согласны. И уже на следующий день мы встретились с Денисом (создатель Хабра — прим.), озвучили свои планы — постараемся сделать быстро, но возможны баги, которые вскоре исправим. И нам дали зелёный свет! Мы вдохновились, но боялись не успеть к Новому году. Забегая вперёд — так оно и вышло:)
В тот же вечер я взялся за работу: начал подбирать цвета для тёмной темы и натягивать их на макеты. Несколько концертов на YouTube, несколько чашек кофе и пицца в помощь — и вуаля! Я перекрасил все макеты, создал палитры для тёмной и светлой темы и подготовил разработчикам json‑файл. Закончив в 6 утра, я решил, что сделал всё возможное и отправился спать. Было трудно поработать ещё 11 часов после рабочего дня, но я осознавал, что макеты нужны для быстрого ответа на вопрос от фронтов «Какой цвет должен быть тут?»
С нетерпением все ждали, когда разработчики натянут на сайт обе палитры и пофиксят баги.
Внезапный Boomburum: были пользователи, которые думали, что тёмную тему можно «сделать за вечер» путём инвертирования цветов — они же правы? Правы же??
Слушай, ну для кого‑то такой подход, может быть, и приемлем, но для меня было очевидно, что надо идти другим путём. Для быстрой демонстрации инвертировать цвета можно с помощью плагинов в Figma буквально за минуту, но получается треш — вырвиглазные сочетания, чернющий фон, ослепляющий белый текст — такое сильно бьёт по глазам. Поэтому при составлении палитры для тёмной темы я брал несколько макетов и в ручном режиме подбирал, каким должен быть фон, каким должен быть текст и т. п. Когда получился основной костяк из 10–15 цветов, все остальные уже подгонял под них, чтобы они нормально сочетались и не противоречили друг другу. Эту основу из 15 цветов показал на встрече с Денисом, чтобы сложилось понимание и единое видение, а не попытка продать кота в мешке. Это было отличное решение.
Из того, что ещё запомнилось: на Хабре несколько сотен хабов и у каждого своя иконка. У большинства хабов были чёрные аватарки, которые сливались с тёмным фоном. Решение — перерисовано 135 иконок. Теперь красота, выглядит это примерно так:
Катя
Фронтендных дел мастер
Степан выше уже рассказал про 300+ цветов, раскиданных за 18 лет по всему проекту — такому количеству оттенков серого позавидует даже Кристиан Грей ? Всё это меня удивило, когда я пришла в Хабр, но сейчас я очень рада, что удалось всё наконец‑то причесать. Это первые шаги к цельному UI-киту.
В декабре мы перевели оставшиеся внутренние пакеты на единую палитру и начали перекрашивать интерфейс. Первую альфа‑версию мы раскатили в конце декабря (последняя запись в чейнджлоге 2023 не даст соврать), но очень скоро поняли, что новогоднего подарка для пользователей не получится — коллеги оформляли тонны багов в самых неожиданных местах, поэтому мы приняли решение больше никому не показывать и проработать получше в новом году. Для понимания масштабов Хабра — поток багов от коллег стал затихать только к концу февраля. Но в итоге сделали это!
Несмотря на то, что с момента «давайте пилить тёмную тему» до её публичного релиза прошёл целый квартал, мы постарались за это время отловить большинство багов во всевозможных местах. Но не исключаем того, что где‑то что‑то не заметили, и поэтому очень рассчитываем на вашу помощь — пишите в комментариях или в личку, если заметили, что где‑то на сайте что‑то не так.
Как включить тёмную тему
Историю с запуском тёмной темой решила поддержать компания Yandex Cloud, вместе с которой мы сделали «рубильник» для включения тёмной темы: ищите блок «Хабр × Yandex Cloud» в правой колонке на главной странице Хабра и жмите «Изменить настройки темы». Ну или переходите по ссылке ниже на божественной красоты лендинг: открывайте, читайте и следуйте инструкциям — помимо активации фичи вас ждёт несколько увлекательных активностей с заданиями, за выполнение которых у вас будет шанс выиграть классный мерч от Yandex Cloud и Хабра:
Есть более короткий путь до активации тёмной темы (который будет использоваться позже), но пока я очень прошу не сообщать о нём в комментариях ?
Переходите на тёмную сторону тему!
Комментарии (109)
alkoro
04.04.2024 07:11+4#Netscape HTTP Cookie File. Хе-хе, всего лишь куки в обмен на опросник.
ris58h
04.04.2024 07:11+8Какая куки хоть? Не хочется в этом маркетинговом булщите пачкаться.
ris58h
04.04.2024 07:11+5@Boomburum можешь и этот комент потереть, чего мелочиться.
Boomburum Автор
04.04.2024 07:11Тёмная тема действительно через куку включается и в будущем этот способ будет основным, через пару кликов меню. Но в статье написано не палить пока этот способ, потому что да, по задумке через партнёрскую активность — но нет же, холебом не корми — дай написать как включить в обход...))
ru1z
04.04.2024 07:11+4Хлебом не корми - даже как-то интереснее, тортовый ламповый хабр, хочешь настройку - либо через задницу с интересными конкурсами, либо кукой.
Больше таких конкурсов на сообразительность!
Ivnika
04.04.2024 07:11+3Для остальных сервисов будет темная тема?
Надеюсь связь с яндексом оправдает себя...
MountainGoat
04.04.2024 07:11+22Уже много лет использую на хабре Dark Reader.
Главная проблема не то, что перечислено, а вот что: народ, когда делает к статьям иллюстрации с графиками и формулами, очень часто пользуется софтом, который на выходе даёт PNG с прозрачным фоном. Все формулы и диаграммы получаются чёрным по чёрному.
Kenya-West
04.04.2024 07:11+5Dark Reader
Он хорош, а на мобильных браузерах в
<имя браузера>://flagsможно задать принудительное перекращивание Хабра в тёмную тему - тоже хорошо работает.формулами, очень часто пользуется софтом, который на выходе даёт PNG
В основном всё-таки SVG, но это не сильно важно. Я для решения этой проблемы написал юзерскрипт, который с помощью определения палитры через библиотеку ColorThief чекает именно формулы чёрным шрифтом и инвертирует их цвет на белый, соответственно. Можете адаптировать под себя на Хабр. Я же читаю Хабр через InoReader и написал всё под него.
mrgick
04.04.2024 07:11+4Также есть мобильный браузер Firefox (Fennec в Fdroid) и в нем есть поддержка расширений, в том числе Dark Reader)
Armitage1986
04.04.2024 07:11+26Темная тема на хабре и не только:
Бесплатно, без регистрации и смс
strokoff
04.04.2024 07:11+87Спасибо! А то открыл ссылку из статьи, увидел Яндекс и закрыл сразу же.
В целом какое-то скотство, впервые вижу чтобы темную тему можно было включить только через маркетинговые унижения
grvelvet
04.04.2024 07:11+11Яндекс сам себя не прорекламирует. Лет 15 назад эту фичу выкатили бы как нечто само собой разумеющееся. Ну а сейчас вот так.
silenceman
04.04.2024 07:11+18Очень удачное слово подобрали. Скотство.
Так оно и есть. Лучше не придумаешь.
Почему меня выбешивает это маркетинговое дерьмо, недавно понял,
по простой причине они пытаются настоящие эмоции подменить каким то лживым суррогатом, изображая радость и участие. Тогда как за всей этой показухой стоит желание украсть ваше внимание или срубить бабла.
Golickoff
04.04.2024 07:11они пытаются настоящие эмоции подменить каким то лживым суррогатом
Нет, просто вы стали брюзгой. В конечном итоге, любая коммерческая структура хочет украсть ваше внимание и срубить бабла, а эмоций вы не испытываете потому что повзрослели и стали противоположностью "лицам, не обременённым интеллектом". Я и сам такой, но борюсь с этим внутри себя. Почему вы больше не допускаете того, что где-то на задворках Хабрахабра и Яндекса сидели люди, которые придумывали и реализовывали это событие, искренне считая что вы кайфанёте, немного отвлёкшись от рабочей рутины? У них не было личной выгоды от лишнего упоминания компании. Им просто хотелось доставить людям немного радости и прочувствовать её через весёлые комментарии. А теперь они читают их и, возможно, грустят от ого что пытаясь своими стараниями сделать людям приятно, они лишь разозлили их.
Ребята, спасибо за старания. Мне понравилось.
Boomburum Автор
04.04.2024 07:11Спасибо за добрые слова, жаль, что найдутся те, кто напишет "Зарегистрировался в 2013 и всего 31 комментарий, забаньте его" :) Да, хотелось какой-то развлекухи, необычной подачи, да чёрным по белому написали, что включается легко (и дальше выведем в менюшку, где меняется язык сайта), но увы, у нас тут только серьезные ребята, которые лишних кликов зря не делают )
mrdemon
04.04.2024 07:11Знаете, бумбурум, в современном обществе, к сожалению, не всё делится на чёрное и белое (это я не про темы UIX, если что). Есть разные страны, разные условия, разные блокировки (надеюсь вы понимаете что именно я имею ввиду)... Так вот, в некоторых обстоятельствах, субъективно, прочтение Хабра -- приятно и не очень противно. Любые действия связанные с яндексом -- отвратительно и противно, кроме того что ещё и не разрешено законодательством.... Вы, лично, как считаете, после подобного "внедрения тёмной темы" у хабра будет больше читателей или меньше??? Вы, как автор вышенаписанной джинсы, должны бы нести некоторую ответственность, не так-ли?
khajiit
04.04.2024 07:11+6Уже не 90-е, 150нит — не то что не предел, а даже не мейнстрим.
Белая страница днем на 400+ нит мониторе — превращается в гребаный прожектор.
А ночью так вообще на любом.
А это — буквально ⅔ мониторов на рынке, не считая ноутов.
Следовательно, темная тема должна включаться автоматически, согласно настройкам системы, а не вот это вот все.
В крайнем случае — переключателем, вынесенным прям в шапку.
Совсем тугие могут запрятать ее в настройки.И очень многие, кто действительно заботился о своих пользователях, поняли это еще лет 7 назад.
Реализовывали фичу, может, и те самые настоящие человеки™, но прикручивали ее через
жопутындекс — точно ученики Менгеле.
Удивительно ли что эти нелюди вызывают возмущение?Если вам все еще непонятно, то представьте, что на шее у вас фиксатор, блокирующий перемещение головы, а в глазах — расширители, блокирующие моргание. И взглянув случайно на Солнце — вы вызовете их срабатывание.
А отвести взгляд возможно, только посмотрев рекламу и пройдя опросник.
Идея все еще кажется хорошей?
KvanTTT
04.04.2024 07:11+2К сожалению, формулы на хабре в темном режиме с этим расширением не читаются.
Armitage1986
04.04.2024 07:11+2Возможно, надо покопаться в настройках расширения. У меня с формулами все в порядке:
Hidden text
chergav
04.04.2024 07:11+12Еще было бы неплохо добавить к html
color-scheme: dark;, чтобы скроллбар соответствовал теме. А вообще супер.
LuxorAB
04.04.2024 07:11+2Вот буквально с неделю назад сдался и поставил Dark Reader. Знал бы что так будет - поставил бы раньше %)
"Рубильник" прикольный, но опоздали на 3 дня с ним
Format-X22
04.04.2024 07:11+5Главное не забывать про людей с гало-эффектом зрения и не забрасывать светлую тему, иначе читать станет больно прямо физически.
bpGusar
04.04.2024 07:11+11у меня уже где то год есть темная тема тут, через dark reader. и проходить какой то, извиняюсь, кал яндекса что б получить темную тему это слишком. оставьте себе, у меня своя есть
Einherjar
04.04.2024 07:11+36Это круто, спасибо. Только не работает. Прошел этот странный узкоспециализированный опрос для каких то фронтенд-кодеров на телефоне, настройки тем разблокировались, выбрал темную (хотя она один фиг темная и раньше была, настройка не влияет ни на что, светлая не работает). Открываю хабр на компе - тема светлая и опять предлагает этот опрос пройти. Я так понимаю реализацией фичи яндекс занимался?
Haze27
04.04.2024 07:11+1Там через куку появляется возможность включить темную тему, а кука - после опроса
Einherjar
04.04.2024 07:11+13ох... опрос про то как должен поступать хороший фронтенд-разработчик и при этом диаметрально-противоположная реализация фичи..
Neikist
04.04.2024 07:11Не удивлен что яндекс под откос катится в плане интерфейса, с такими подходами. Последние пару лет какие то просто дикие баги у них наблюдаю в том же маркете например, когда фильтры пропадают к чертям и даже перезагрузка страницы это не лечит.
Ardum
04.04.2024 07:11+50Во-первых, с чего вы решили, что хабр светлый?
Во-вторых, я аж зарегистрировался чтоб выразить своё возмущение. Ни на одном сайте включение тёмной темы, если она есть, не превращали в квест. Только хабр до этого додумался. Вернее, докатился.
semen26
04.04.2024 07:11Я вот тоже зарегистрировался, чтоб выразить своё негодование. Вы ждали фичу много лет - вам её сделали и рассказали, что это была большая работа - Хабр молодцы, если смогли это "продать" крупному клиенту, в отличие от других сайтов - тут их можно разве что похвалить, так как им тоже нужно на что-то жить, ведь Хабр-то вы бесплатно и без всяких подписок читаете (в отличие от других сайтов), ещё наверное и рекламу режете. Если вам влом понажимать пару кликов (вас даже не попросили где-то оставить данные или что-то ещё непотребное сделать), то видимо для вас фича будет общедоступна чуть попозже (о чём упоминуто в статье). Или молча включите через куку, зачем в каментах ныть. Прям бесит такое нытьё, перетрудились бедненькие :)
i360u
04.04.2024 07:11+24Объясняю. Хабр - это сообщество. Он существует, благодаря авторам и комментаторам, которые тут активно пишут. Поэтому, это ваше "вам сделали" отнесите в какое-нибудь другое место. Все что тут пишут - это обратная связь от этого самого сообщества, и попытки обесценивать ее, называя нытьем, бесят не меньше.
Asbor
04.04.2024 07:11+2в вк был квест, нужно было написать в комментах "темная тема", без этого тумблера в настройках не появлялось
TerraV
04.04.2024 07:11+21Капец, на каждом устройстве проходить эту канитель заново (пусть и рандомно тыкать кнопки). Это днище UX.
domix32
04.04.2024 07:11+1Малость темновато. Вроде не раз уже рассказывали, что инверсии фонов не лучший план - контраст получается слишком резким и тонкие шрифты могут сливаться из-за такой переэкспозиции.
$E=mc^2$
Формулам что-то нехорошо.
jarkevithwlad
темная тема это хорошо, но реклама яндекса...
kovalensky
Вспомнилось
Kenya-West
Слишком сильно упали на тёмную сторону, получается?
TIEugene
...и рунглиша...
PS. кто-нить объяснит внятно что это за челлендж за такой?
Я первый раз услышал, когда детеныш из школы принес - "у нас на физре сегодня был челлендж".
Оказывается это было
Веселые стартыстаринная греческая игра "эстафета". "Челлендж", иопт!ru1z
А вы что не хотите выиграть мерч в челлендже от Клода?
офф
Челлендж - я бы перевел как испытание (на смелость). Обычно переводят как "вызов", но это как-то по пионерски звучит (да и в большинстве того, что называют "челлендж" - "вызовы" довольно нелепые), а "пари" устарело и не полностью показывает значение.
Ну, это маладежный сленг, "эстафета" из французского тоже как-то пришло, причем так, что из этого спортсленга сейчас первоначальное значение слова и не сразу поймешь. Можно конечно детей просить называть соревнования каким-нибудь "агоном", но сомнительно, что древности пойдут в массы.
Слово "Челлендж" постарше "фичи" и "донатов" - слова, на которые, наверное, уже никто не обращает внимания.
zamboga
Скажите, вы ходите в цирюльню, к брадобрею, в парикмахерскую или в барбершоп?
А ведь все эти слова — иностранные так или иначе. Язык живой, заимствования были, есть и будут, разница лишь в том, что некоторые слова мы знаем с глубокого детства, а некоторые приходят в наш лексикон только сейчас, поэтому вызывают отторжение.
Хотя, не спорю, принять "челлендж" вместо "испытания" или какой-нибудь "кринж" вместо "испанского стыда" — не легко.
vadim_bv
Брадобрей тоже иностранное?