Логотип для тёмной темы — как адаптировать

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

Почему знак пропадает на тёмном фоне

Первая причина — тёмный цвет самого знака. Чёрный или тёмно‑синий логотип контрастен на белом, но на почти чёрном фоне его контраст падает почти до нуля, и знак просто растворяется. Вторая причина — непрозрачная подложка: если логотип сохранён как PNG или JPG с белым фоном, на тёмной странице вокруг него появляется белый прямоугольник. Часто обе причины встречаются вместе, и тогда знак и сливается, и «прилипает» одновременно.

От простого к надёжному: как это чинят

Раз причин две, и решения выстраиваются по нарастающей — от самого лёгкого к самому основательному.

Самый простой случай — монохромный знак. Если логотип одноцветный, достаточно инверсии: чёрный на светлой теме, белый на тёмной. Это работает, потому что такой знак несёт информацию формой, а не цветом, — и если он в SVG, инверсию проще всего сделать прямо в коде, поменяв значение fill (как менять цвета вручную — в статье как изменить цвет логотипа). Как привести знак к одному цвету, если он ещё цветной, — в статье чёрно-белый логотип.

А вот для цветного знака инверсия уже не годится: буквальная перекраска испортит фирменные цвета — синий станет оранжевым, красный голубым. Поэтому здесь нужен следующий уровень — отдельная версия для тёмного фона, подготовленная заранее. Обычно в ней фирменные цвета оставляют как есть, но осветляют или заменяют только тот элемент, что «пропадал» (например, чёрный текст делают белым), а при необходимости добавляют тонкую обводку. Именно так поступают крупные бренды: у Apple, Google и Spotify в гайдлайнах прописаны отдельные варианты знака под светлый и тёмный фон — это часть фирменного стиля, которую фиксируют в брендбуке. Многие логотипы в нашем каталоге уже содержат такие варианты в блоке версий.

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

На сайте версии переключаются сами

Когда все версии готовы, остаётся последний шаг — и на сайте его не нужно делать руками. Браузер и так знает, какая тема выбрана в системе, а медиазапрос prefers-color-scheme сам подставляет нужный файл:

.logo { content: url("logo-dark.svg"); }        /* по умолчанию — для светлой темы */
@media (prefers-color-scheme: dark) {
  .logo { content: url("logo-light.svg"); }     /* белая версия для тёмной темы */
}

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

Что учесть заранее

Чтобы не переделывать, полезно держать в голове несколько нюансов. Контраст стоит проверять не «на глаз», а по‑настоящему: слишком тёмные элементы теряются даже на не‑чёрном сером. При этом «тёмная тема» почти никогда не означает чистый чёрный — большинство интерфейсов используют тёмно‑серый вроде #1e1e1e, поэтому и проверять знак нужно на реальном фоне, а не на #000000. И, наконец, не стоит плодить версии без нужды: двух вариантов, светлого и тёмного, почти всегда достаточно, а если знак должен работать ещё и в разных размерах — это уже соседняя задача, адаптивный логотип. Всё это гораздо проще, если исходник в векторе: из SVG любая версия делается за минуту, из готового PNG — уже нет.

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

Короткий вывод

Логотип пропадает на тёмном фоне по двум причинам — из‑за тёмного цвета знака или непрозрачной подложки, — и решения выстраиваются по нарастающей: монохромному знаку хватит инверсии, цветному нужна отдельная светлая версия, но в основе всего лежит прозрачный фон, без которого не спасёт ни один подобранный цвет. На сайте версии стоит переключать автоматически через prefers-color-scheme, а исходник держать в векторе — тогда любая версия под тёмную тему делается за минуту.

Логотипы в каталоге Trace Logo's можно перекрасить прямо в браузере и скачать готовую светлую или тёмную версию в SVG и PNG.