Дизайн тёмной темы: как выпустить вторую тему и не сломать первую

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

Эта статья о рабочем подходе. Цветовая математика, благодаря которой тёмная тема ощущается осознанной, ловушки компонентов, которые ломаются в темноте, и структура токенов, которая держит обе темы в синхроне по мере роста продукта. Никаких градиентов с Dribbble, только тёмная тема, которая заслужила своё место в дизайн-системе.

Что такое тёмная тема на самом деле

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

Шорткат с инверсией проваливается по конкретной причине. Светлая тема опирается на белые поверхности, которые отражают глубину вверх. Тёмная не может это инвертировать, потому что чисто чёрные поверхности поглощают глубину, а не создают её. Всю систему возвышения (elevation) приходится перестраивать. В разборе руководства по дизайн-системам объясняется, почему это должно происходить внутри токенов, а не внутри отдельных компонентов.

Почему тёмная тема важна в 2026 году

Три причины. Ни одна из них не эстетическая.

Заряд батареи на OLED-экранах. Каждый чёрный пиксель на OLED-панели не потребляет энергию. Тёмный интерфейс на телефоне может снизить энергопотребление экрана на 30-60 процентов при высокой яркости. Для мобильных пользователей тёмная тема сначала функция экономии батареи и только потом визуальное решение.

Доступность для людей с чувствительностью к свету. Пользователи с мигренью, астигматизмом или фотофобией не могут комфортно работать со светлым интерфейсом долгое время. Выпуск тёмной темы это обязательство по доступности, а не вопрос вкуса. Чек-лист веб-доступности показывает, где тема вписывается в полный аудит.

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

Первое правило: никогда не используйте чистый чёрный

Чистый чёрный (#000000) самая частая ошибка новой тёмной темы. Он кажется правильным, ведь это вроде бы самая тёмная поверхность. Но выглядит неверно, потому что человеческий глаз не может оценить глубину на фоне идеального чёрного.

Решение: берите тёмно-серый с едва заметным оттенком бренда в качестве базовой поверхности. Для большинства продуктов подойдёт диапазон от #0B0B10 до #121218, иногда выше, до #1A1A1F. Точное значение зависит от цветовой температуры бренда. Тёплый бренд уходит в слегка тёплый тёмный. Холодный бренд в слегка холодный. Чистый нейтральный выглядит безжизненно.

То же правило относится к самому контрастному тексту. Чистый белый (#FFFFFF) на тёмной поверхности создаёт гало, эффект размытия ярких краёв, из-за которого мелкий текст утомляет глаза. Опустите текст до примерно #E8E8EA или примените белый с прозрачностью 85-92 процента. Разница невидима глазу, но огромна для читаемости.

---

Возвышение поверхностей в тёмной теме

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

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

Material Design формализовал это пятиступенчатой шкалой возвышения, и общая идея работает в любой дизайн-системе. Рабочая шкала для большинства продуктов:

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

Математика контраста для тёмных тем

Глоссарий по коэффициенту контраста описывает базовый уровень WCAG: 4,5 к 1 для обычного текста и 3 к 1 для крупного. Тёмная тема эти правила не ослабляет, но меняет способ их выполнения.

В светлой теме основной текст около #222 на белом фоне даёт примерно 16 к 1. Дизайнеры привыкли к огромному запасу над минимумом. В тёмной теме всё теснее. Основной текст #E0E0E0 на #0E0E12 даёт около 13 к 1, это всё ещё сильно, но запас на ошибку меньше. Если опустить текст до #B0B0B0 ради мягкости, раздел может незаметно уйти ниже 4,5 к 1.

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

Частая ловушка это токен приглушённого текста. В светлой теме приглушённый текст #666 на белом читается чётко, 5,7 к 1. Инвертированный в #999 на #0E0E12, он падает примерно до 4,2 к 1 и не проходит WCAG AA. Шорткат с инверсией тихо ломает соответствие требованиям доступности, и большинство команд замечают это только после аудита.

Цвет в тёмной теме: насыщенность, а не только яркость

Цвета бренда, которые поют на белом фоне, на тёмном часто выглядят грязными или электрическими. Причина в том, что тёмные поверхности усиливают воспринимаемую насыщенность. Акцент со 100-процентной насыщенностью на светлой поверхности выглядит уверенно. Тот же акцент на тёмной выглядит радиоактивным.

Правило: уменьшайте насыщенность акцентных цветов для тёмной темы, обычно на 10-20 процентов, и слегка осветляйте их. Основная кнопка #3455FF на белом может стать #5C78FF на тёмном. То же семейство оттенка, подстроенное под новую контрастную среду. Бренд по-прежнему узнаётся как бренд. Просто перестаёт резать глаза.

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

---

Ловушки компонентов, которые ломаются в темноте

Большинству компонентов нужна хотя бы одна правка для тёмной темы. Некоторые без неё ломаются полностью. Вот обычные виновники.

Границы становятся главным разделителем

В светлой теме компоненты разделяет едва заметная тень или почти невидимая граница. В тёмной тени исчезают, и большинство границ растворяется. Граница становится основным инструментом для задания краёв компонента, и её часто нужно поднять с чего-то вроде #EEE в светлой теме до примерно #2A2A30 в тёмной, чтобы она оставалась видимой.

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

Тени меняют своё назначение

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

Рабочая пара теней для тёмной темы:

• Внешняя: 0 4px 12px rgba(0, 0, 0, 0.5), чтобы заземлить элемент
• Внутренняя верхняя подсветка: inset 0 1px 0 rgba(255, 255, 255, 0.05), чтобы показать приподнятый край

Вместе компонент выглядит приподнятым, а не вырезанным. По отдельности ни один из эффектов не читается вообще.

Отключённые состояния исчезают

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

Изображениям и иллюстрациям нужна своя обработка

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

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

Состояниям фокуса ввода нужно больше контраста

Синий фокус-контур, который работает на белом фоне, теряет выразительность на тёмных поверхностях. Глоссарий по состоянию фокуса описывает требуемый WCAG индикатор focus-visible. В тёмной теме фокус-контуру часто нужно быть на 10-20 процентов ярче или толще, чем его светлому близнецу. Требование доступности не меняется, но визуальное решение должно подстроиться, чтобы по-прежнему его выполнять.

---

Структура токенов для двух тем

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

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

Три слоя токенов:

Слой первый: примитивы. Сырые значения цвета. color.neutral.900, color.brand.500. Без мнения, без контекста.

Слой второй: семантика. Названия по ролям. color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default. Каждый семантический токен указывает на примитив.

Слой третий: тема. Две полные карты, по одной на тему, которые решают, в какой примитив разворачивается каждый семантический токен. Светлая тема сопоставляет color.surface.base с color.neutral.50. Тёмная сопоставляет color.surface.base с color.neutral.900.

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

Уважение системных настроек

Браузер предоставляет prefers-color-scheme через CSS media queries. Продукт обязан это уважать. Стандартный опыт для пользователя с включённой тёмной темой на уровне ОС это тёмная тема, точка. Переключатель внутри приложения это уточнение, а не замена.

Три правила корректной реализации:

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

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

Дайте опцию «как в системе». Пользователям, которые хотят, чтобы управляла настройка ОС, нужен путь назад к этому поведению. Трёхпозиционный переключатель (светлая, тёмная, системная) это ожидаемый паттерн, и его нужно поставлять по умолчанию.

Тестирование тёмной темы

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

Тест яркости. Откройте продукт на ноутбуке при 30 процентах яркости в тёмной комнате. Всё, что исчезает, всё, что размазывается, всё, что неприятно светится, заносится в баги. Так находят слишком тонкие границы, слишком яркий текст и акцентные цвета, которые всё ещё слишком насыщенны.

Аудит контраста. Каждое изменение темы запускает полную проверку контраста по всем семантическим парам. Инструменты вроде axe, WAVE или встроенной проверки контраста Figma ловят регрессии, которые пропускает визуальный обзор.

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

Тест на реальных устройствах. OLED-телефоны отображают тёмные поверхности иначе, чем LCD-ноутбуки. Тёмная тема, которая идеально выглядит на MacBook, часто показывает бандинг или резкие переходы на iPhone. Тестируйте на настоящих телефонах, а не только в эмуляторе устройств браузера.

---

Типичные провалы тёмной темы

Три паттерна вызывают большинство проблем качества выпуска тёмной темы. Все три предотвращаются описанной выше структурой токенов.

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

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

Регрессия доступности. Светлая тема выходит с соответствием WCAG AA, тёмная промахивается в трёх местах, и никто не проверяет до аудита на соответствие. Решение: слой семантических токенов плюс автоматическая проверка контраста в CI. Каждый PR запускает проверку контраста. Провалы блокируют merge.

Если вам нужна команда, которая выпускает тёмную тему как первоклассное системное решение, от токенов до тестирования, нанимайте Brainy. Тёмная тема редко бывает сложной проблемой. Сложная проблема это выпустить пару без дрейфа.

FAQ

Чистый чёрный лучший фон для тёмной темы?

Нет. Чистый чёрный (#000000) создаёт резкий контраст с белым текстом и убирает визуальные подсказки глубины, нужные глазу для чтения возвышения. Используйте тёмно-серый с лёгким оттенком бренда, обычно в диапазоне от #0B0B10 до #121218. Глубина в тёмном интерфейсе читается как поверхности, поднимающиеся к пользователю, а для этого нужна стартовая поверхность, которая не является чистым чёрным.

Как делать возвышение в тёмной теме без теней?

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

Должна ли тёмная тема просто инвертировать цвета светлой?

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

Как обращаться с изображениями и фотографиями в тёмной теме?

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

Как структурировать токены для поддержки двух тем?

Три слоя. Примитивы (сырые значения цвета), семантические токены (названия по ролям вроде color.surface.base) и карты тем (по одной на тему, сопоставляющие каждый семантический токен с примитивом). Компоненты потребляют только семантические токены, поэтому переключатель тем меняет карту, и ничего не ломается. Именно этот паттерн позволяет тёмной теме масштабироваться дальше небольшой команды.

Улучшает ли тёмная тема доступность?

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

Тёмная тема это системное решение, а не переключатель

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

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

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

Что почитать дальше

• Руководство по дизайн-системам
• Доступный цветовой контраст
• Чек-лист веб-доступности
• Теория цвета для дизайнеров
• Дизайн визуальной иерархии