35 тёмных тем для сайтов: примеры, коды цветов и правила

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

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

35 тёмных тем с реальных сайтов и их цвета

Это подборка тёмных тем с живых сайтов: агентства, портфолио, сервисы, магазины. У каждой — основные цвета с кодами (hex) и контраст между самым тёмным и самым светлым цветом. Код можно скопировать прямо в редактор сайта или в Figma.

Как читать контраст: норма для обычного текста — от 4,5 к 1. Чем больше число, тем чётче текст. Но чистый белый на чистом чёрном у части людей расплывается — это эффект гало, о нём ниже, в правилах.

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

Где тёмная тема на своём месте

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

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

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

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

Где тёмная тема вредит

Длинные тексты. Светлые буквы на тёмном фоне читать тяжелее: буквы визуально «растекаются» по фону, и глаз быстрее устаёт. Если у вас статьи на десять минут чтения, тёмная тема как единственный вариант съест дочитывания.

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

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

Аудитория старше сорока пяти — пятидесяти лет. С возрастом хрусталик рассеивает свет сильнее, и светлый текст на тёмном фоне даёт заметный ореол вокруг букв. Если ваши клиенты — люди старшего возраста, тёмная тема как единственный вариант оформления — плохая идея.

Свести это в одну таблицу проще, чем держать в голове список из восьми пунктов.

Шесть правил хорошей тёмной темы

1. Фон не чёрный

Чистый чёрный даёт слишком резкий контраст с белым текстом — от этого рябит и режет глаза. Берите очень тёмный серый или тёмный с лёгким оттенком: синеватым, зеленоватым, фиолетовым.

Оттенок в фоне — то, что отличает продуманную тёмную тему от вывернутой наизнанку светлой.

2. Текст не белый

По той же причине. Основной текст лучше делать светло-серым, а чистый белый оставить для заголовков и того, на что надо посмотреть в первую очередь.

Так появляется иерархия: глаз сам понимает, что здесь главное, а что — второстепенный текст рядом.

3. Глубина показывается светом, а не тенью

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

Всплывающее окно светлее карточки, карточка светлее фона. Это единственный способ показать слои интерфейса, не рисуя рамки вокруг каждого блока.

4. Цвета приглушить

Яркие насыщенные цвета, которые прекрасно выглядят на белом, на тёмном начинают вибрировать и выжигать глаза. Особенно чистый синий и чистый красный.

Тот же цвет надо взять светлее и менее насыщенным. Это отдельная работа: набор цветов для тёмной темы не получается из светлого автоматически, простой инверсией.

5. Проверить контраст, а не поверить глазу

В тёмной теме легко сделать красиво и нечитаемо: серый текст на сером фоне выглядит стильно на большом мониторе дизайнера и пропадает на телефоне под солнцем.

Есть бесплатные проверялки контраста, они дают число, а не мнение.

Для крупных заголовков порог мягче — не ниже 3 к 1. Это то же требование доступности, и одновременно простая забота о читателе, у которого может не быть идеального зрения.

6. Дать выбор и запомнить его

Лучшее решение — не выбирать за человека. Браузер сообщает сайту, какая тема стоит в системе, и сайт может открыться сразу правильным вариантом.

Плюс переключатель на видном месте и запоминание выбора. Человек, который один раз переключился на светлую тему, не должен делать это заново на каждой странице.

Частая ошибка: забыть про всё остальное

Тёмную тему обычно делают для главной и внутренних страниц, а потом обнаруживают, что забыли:

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

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

Четыре реальные тёмные палитры

Дальше — не абстрактный совет, а точные цвета из сервисов, которые вы наверняка открывали сегодня. Можно взять эти номера цветов (hex-коды) за отправную точку для своей палитры.

Контраст в таблице посчитан по формуле WCAG для белого текста на указанном фоне — у всех трёх с большим запасом выше минимума 4,5 к 1. У Netflix карточки специально темнее фона, а не светлее, как советует правило №3 — там на первом месте фотография, а не иерархия панелей, и это осознанное исключение, а не ошибка.

Источники цветов: официальные гайды Spotify, бренд-портал Netflix, руководство Google по тёмной теме Material Design. Похожий приём есть и у X (бывший Twitter): в настройках можно выбрать между тёмно-синим фоном #15202B и полностью чёрным #000000 — у обоих контраст с белым текстом заметно выше минимума, 16,5 к 1 и 21 к 1 соответственно, но многие находят чистый чёрный слишком резким для долгого чтения. Поэтому платформа не выбирает один вариант за пользователя — ровно то же правило №6 из списка выше.

С чего начать, если тёмной темы ещё нет

Не с перекраски. С набора цветов.

1. Выпишите все цвета, которые уже есть на сайте.

   Фоны, поверхности, текст, границы, акцент, состояния успеха и ошибки. Обычно их оказывается неожиданно много, и часть дублируется без причины.

2. Подберите пару для тёмной темы к каждому цвету.

   Не «инвертируйте», а именно подберите — проверяя контраст и глядя на живом экране, а не в макете дизайнера.

3. Проверьте контраст числом.

   4,5 к 1 для обычного текста, 3 к 1 для крупных заголовков. Это займёт минуты, а спасёт от переделки после запуска.

4. Пройдите весь сайт, а не только главную.

   Формы, письма, страницы ошибок, графики. Список из раздела выше — с него и начните.

Когда набор готов, переключение темы становится технической мелочью. Когда набора нет, тёмная тема превращается в бесконечную ловлю белых пятен по сайту.

Доработка существующего сайтаДобавим тёмную тему к уже работающему сайту без пересборки с нуля

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

Разработка дизайна сайтаСпроектируем интерфейс, который останется читаемым и в тёмном, и в светлом режиме

Для технических специалистов

Автоматическое определение системной темы делается через медиазапрос prefers-color-scheme: dark в CSS — браузер сам сообщает, что выбрано в настройках устройства. Мета-тег color-scheme в <head> дополнительно подсказывает браузеру красить системные элементы — скроллбар, выделение текста — в тон странице.

Палитру удобнее хранить в CSS-переменных (custom properties): один набор токенов цвета для светлой темы, второй — для тёмной, а компоненты обращаются к переменной, а не к конкретному коду цвета. Тогда переключение темы — это подмена набора переменных, а не перекраска каждого элемента вручную.

Выбор пользователя стоит сохранять в localStorage и применять его до отрисовки страницы — иначе будет заметная вспышка неправильной темы на долю секунды при каждой загрузке. Для проверки контраста годится любой бесплатный калькулятор по формуле WCAG; для более точной оценки восприятия яркости существует новая методика APCA, но пока это черновой стандарт, а не обязательное требование.