Привет! Мы приготовили для вас долгожданный подарок (из заголовка вы уже поняли, какой), но мы вам его просто так, как говорится, не отдадим 😃
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 и Хабра:
Есть более короткий путь до активации тёмной темы (который будет использоваться позже), но пока я очень прошу не сообщать о нём в комментариях 🙂
Переходите на тёмную сторону тему!
Автор: Алексей
