Темная тема для BAR:LAB — магазина барного оборудования

О проекте

BAR:LAB продаёт профессиональное оборудование для баров и ресторанов: шейкеры, джиггеры, посуду, барные станции, всё, что стоит по ту сторону стойки. Аудитория здесь специфическая — бармены, шеф-бар-менеджеры, владельцы заведений, люди с насмотренностью и вкусом к деталям. Обычная светлая витрина такому покупателю ничего не говорит. Заказчик пришёл с готовой дизайн-концепцией в тёмных тонах, и наша задача была не рисовать заново, а точно перенести эту концепцию в рабочий магазин на InSales.

Сложность темной темы на готовом движке в том, что InSales отдаёт типовую вёрстку и стили каталога, рассчитанные на светлый фон. Просто «залить всё чёрным» нельзя — поедут контрасты, пропадут границы карточек, кнопки сольются с фоном. Пришлось переопределять палитру на уровне CSS-переменных и переписывать оформление ключевых компонентов: шапки, карточек товара, фильтров каталога, корзины. Каждый экран проверяли отдельно, чтобы тёмная схема держалась и в листинге, и на странице товара, и в оформлении заказа.

Темная цветовая палитра

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

• Три уровня фона: базовый почти-чёрный, чуть светлее — поверхность карточек, ещё светлее — всплывающие панели и модалки. Это даёт глубину без цветного шума.
• Акцентный цвет вынесен на кнопки, ссылки и статусы («в наличии», цена, скидка), чтобы действие сразу считывалось на тёмном полотне.
• Границы и разделители — не чистый серый, а полупрозрачные, чтобы карточки держали единый тон и не «резались» жёсткой линией.
• Текст разведён по контрасту: заголовки светлее, второстепенные подписи приглушены, но остаются читаемыми.

Тёмная тема в e-commerce — это не «инвертировать цвета». Главный риск — контраст: тёмно-серый текст на чёрном фоне выглядит стильно на макете, но в реальном каталоге по нему невозможно быстро сканировать цены и характеристики. Контраст текста и кнопок держали на уровне, комфортном для долгого просмотра, — чтобы витрина оставалась удобной для покупки, а не только красивой.

Анимация и навигация

Анимацию добавляли дозированно — она подсвечивает главные блоки, а не отвлекает от товара. Появление секций при прокрутке, плавные ховеры на карточках, аккуратные переходы состояний: всё сделано на CSS-переходах и лёгком JavaScript, без тяжёлых библиотек, которые тормозили бы загрузку витрины.

• Ховеры карточек товара: мягкое подсвечивание границы и подъём тени, чтобы на тёмном фоне было понятно, что элемент кликабельный.
• Переходы работают на transform и opacity — это дёшево для рендера и не даёт дёрганий на мобильных.
• Навигация выстроена интуитивно: покупатель без объяснений понимает, где каталог, где корзина, как вернуться к разделу.
• Адаптивная вёрстка: сетка каталога перестраивается под планшет и телефон, тёмная палитра и контрасты сохраняются на всех разрешениях.

Динамический footer

Отдельная деталь темы — динамический footer, который выезжает при прокрутке страницы. Он не занимает место постоянно, но всегда под рукой: контакты, важные разделы, ссылки на условия. На тёмном фоне такой выезжающий блок работает ещё и как контрастный акцент — визуально закрывает страницу и подсказывает, что доступ к сервисной информации никуда не делся. Поведение реализовано на JavaScript с отслеживанием прокрутки, аккуратно, без рывков и лишних перерисовок.

Оптимизация изображений

Магазин оборудования — это много фотографий товара, и на тёмной теме они несут основную визуальную нагрузку. Изображения оптимизировали, чтобы витрина оставалась лёгкой: карточки грузятся быстро, а фактура металла и форма посуды не теряются при сжатии. Подгружающиеся картинки на чёрном фоне бросаются в глаза сильнее, чем на белом, поэтому за плавность отдачи следили отдельно.

Результат

• Уникальный темный дизайн выделяет магазин среди светлых типовых витрин InSales
• Товары выглядят премиально на темном фоне — металл и стекло читаются выигрышно
• Плавная анимация подсвечивает ключевые блоки и улучшает пользовательский опыт
• Динамический footer держит контакты и разделы под рукой без потери места на экране
• Адаптивная вёрстка и оптимизация изображений сохраняют скорость и контраст на всех устройствах