Тёмная тема в приложении: зачем она нужна и как её реализовать

Коротко. Тёмная тема — альтернативная палитра интерфейса: светлый текст на тёмных поверхностях. Пользователи ждут её с выхода iOS 13 и Android 10, но батарею она заметно экономит только на OLED-экранах и высокой яркости. Чтобы тема не выглядела «инвертированной», нужны тёмно-серые фоны, контраст по WCAG, семантические цветовые токены и проверка каждого экрана на реальных устройствах.

Системная тёмная тема появилась в Android 10 (API 29) — её включают в настройках, плиткой быстрых настроек или вместе с режимом энергосбережения (Android Developers), а в iOS Dark Mode есть с 13-й версии 2019 года (Apple Human Interface Guidelines). При этом популярный аргумент «тёмная тема в приложении бережёт батарею» работает хуже, чем принято думать: исследователи Университета Пердью намерили на OLED-смартфонах при автояркости экономию всего 3–9%. Поэтому тему делают ради удобства и ожиданий пользователей, а не ради лишнего часа работы телефона.

Удачная тёмная тема — это не перекрашенные макеты, а продуманная вторая палитра со своими правилами контраста, глубины и акцентов. Поэтому тёмную тему закладывают на этапе UI/UX-дизайна, а не дорисовывают после релиза, когда цвета уже разбросаны по сотням экранов и файлов.

Статья для владельцев продуктов, продакт-менеджеров и дизайнеров: разберём, когда тёмная тема действительно нужна, как подобрать палитру и проверить контраст, как внедрить её по шагам и реализовать на iOS, Android, Flutter и в вебе, и во что это обойдётся.

Что такое тёмная тема в приложении

Тёмная тема (dark mode, тёмный режим интерфейса) — это альтернативное оформление приложения, в котором основные поверхности тёмные, а текст и иконки светлые. Она не меняет структуру экранов и логику: меняются только цвета, тени, иллюстрации и иногда насыщенность шрифтов.

Тёмную тему часто путают с двумя похожими вещами:

• Ночной режим с тёплым фильтром (Night Shift в iOS, «Ночной свет» в Android) — системная функция, которая сдвигает цвета всего экрана в тёплую сторону. Палитру приложения она не меняет.
• Инверсия цветов — функция специальных возможностей, которая механически переворачивает все цвета, включая фотографии. Это инструмент доступности, а не дизайн.

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

Зачем бизнесу тёмная тема

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

Комфорт в темноте и меньше бликов

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

Батарея: что на самом деле говорят исследования

Экономия заряда — самый живучий миф о тёмной теме. В исследовании Университета Пердью (2021) замеряли энергопотребление на четырёх смартфонах с OLED-экраном (Pixel 2, Moto Z3, Pixel 4, Pixel 5) и шести популярных приложениях: Google Maps, News, Phone, Calendar, YouTube и Calculator. Результат:

• при автоматической яркости 30–50% тёмный режим экономит в среднем 3–9% энергии;
• при яркости 100% экономия вырастает до 39–47%.

Эффект есть только на OLED: там каждый пиксель светится сам, и тёмный пиксель потребляет меньше. На LCD-экранах подсветка горит целиком при любом цвете картинки, поэтому выигрыша там практически нет. Цифры вроде «тёмная тема экономит 30% заряда» обычно взяты из тестов одного устройства на высокой яркости, и обещать их пользователям не стоит.

Ожидания пользователей и доступность

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

Фокус на контенте

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

Когда тёмная тема не нужна или может подождать

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

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

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

Как подобрать палитру для тёмной темы

Палитра тёмной темы — это отдельный набор цветов со своими правилами, а не инверсия светлой. Самая подробная публичная методика описана в руководстве Material Design по тёмной теме, и её принципы подходят для любой платформы.

Фон: тёмно-серый вместо чёрного

Material Design рекомендует базовую поверхность #121212, а не чистый чёрный #000000. На тёмно-сером фоне видно тени и разницу между слоями, белый текст не режет глаз, а на OLED-экранах меньше заметно смазывание при прокрутке: пиксели, которые были полностью выключены, загораются с небольшой задержкой. Чистый чёрный уместен точечно — например, в полноэкранном просмотре фото и видео.

Уровни поверхностей вместо теней

В светлой теме глубину показывают тенями, но на тёмном фоне тень почти не видна. Поэтому в тёмной теме действует обратное правило: чем выше слой (elevation), тем светлее его поверхность. Базовый фон — самый тёмный, карточки чуть светлее, всплывающие меню и диалоги — ещё светлее. На практике хватает трёх-четырёх уровней, например #121212, #1E1E1E, #242424 и #2C2C2C.

Акцентные и брендовые цвета

Насыщенные цвета, которые хорошо смотрятся на белом, на тёмном фоне начинают «вибрировать» и рябить. Material Design советует брать в тёмной теме десатурированные, более светлые оттенки акцентов. Брендовый цвет при этом лучше не подменять, а подобрать ему тёмный вариант вместе с брендовой командой и проверить его на всех уровнях поверхностей.

Статусные цвета: ошибки, предупреждения, успех

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

Элемент	Светлая тема	Тёмная тема
Базовый фон	белый #FFFFFF или светло-серый	тёмно-серый #121212
Карточки и диалоги	белые, глубина — тенью	светлее фона (#1E1E1E–#2C2C2C), глубина — цветом поверхности
Основной текст	почти чёрный	белый с непрозрачностью 87%
Второстепенный текст	серый	белый 60%
Неактивный текст	светло-серый	белый 38%
Разделители и обводки	светло-серые линии	белый 10–12% или чуть более светлый серый
Акцент	насыщенный брендовый цвет	десатурированный, более светлый оттенок
Тени	основной способ показать глубину	почти не работают, используются минимально

Контраст и типографика: требования WCAG

Контраст в тёмной теме подчиняется тем же правилам доступности, что и в светлой. Критерий WCAG 2.1 1.4.3 требует не меньше 4,5:1 для обычного текста и 3:1 для крупного (уровень AA), а уровень AAA (критерий 1.4.6) — 7:1.

Проблема тёмных тем обычно не в нехватке контраста, а в его избытке. Чисто белый текст на #121212 даёт около 18,7:1 (расчёт по формуле WCAG) — буквы начинают «светиться» и оставлять ореол, особенно на длинных текстах. Поэтому основной текст делают белым с непрозрачностью 87%: это около 14:1, запас по доступности огромный, а глаза устают меньше.

Иерархия текста прозрачностью

Вместо набора разных серых Material Design предлагает три уровня белого: 87% для основного текста, 60% для второстепенного и 38% для неактивного. На фоне #121212 это примерно 14:1, 7:1 и 3,6:1. Неактивные элементы WCAG от требований к контрасту освобождает, но подписи, плейсхолдеры и вспомогательный текст должны держать хотя бы 4,5:1 — и на каждом уровне поверхности, а не только на базовом фоне.

Насыщенность шрифта

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

Иконки, иллюстрации и фото в тёмной теме

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

• Иконки — векторные и окрашенные токеном. SVG или векторные ресурсы платформы перекрашиваются автоматически, а растровые PNG с «зашитым» цветом придётся дублировать.
• Иллюстрации — с тёмным вариантом. Светлые картинки с белым фоном выглядят как дыра в экране. Нужен либо прозрачный фон, либо отдельная версия иллюстрации для тёмной темы.
• Фото и аватары — с мягкой подложкой. Слишком яркие снимки можно слегка приглушить или поместить на подложку, чтобы они не выбивались из интерфейса.
• Логотипы партнёров и платёжных систем — только версии на прозрачном фоне или официальные варианты для тёмных фонов.
• Кнопки и их состояния. Pressed, disabled, focus и hover в тёмной теме нужно задать заново: затемнение при нажатии на тёмном фоне не видно, поэтому состояния обычно показывают осветлением или обводкой.
• Алерты, тосты и бейджи — с собственными цветами поверхности и текста, а не просто с инвертированными.

Как внедрить тёмную тему: 7 шагов

Внедрение тёмной темы — это работа и дизайнеров, и разработчиков, и тестировщиков. Мы проводим её в семь шагов:

1. Проведите аудит экранов и компонентов. Составьте список всех экранов и состояний: онбординг, формы, ошибки, пустые экраны, модальные окна, WebView, письма и пуш-уведомления. Отдельно выпишите компоненты и иллюстрации, которые зависят от цвета.
2. Введите семантические токены. Замените «голые» цвета вроде #FFFFFF на токены по смыслу: background/primary, surface/raised, text/secondary, border/subtle, accent/default. У каждого токена будет значение для светлой и для тёмной темы.
3. Соберите палитру тёмной темы. Задайте 3–4 уровня поверхностей от #121212 и светлее, три уровня текста, десатурированные акценты и статусные цвета, а затем проверьте все пары на контраст по WCAG.
4. Перенесите тему на ключевые макеты. Отрисуйте в тёмной теме основные сценарии: онбординг, каталог, карточку товара или услуги, оплату, формы с ошибками и пустые состояния. На этих экранах обычно всплывают проблемы палитры.
5. Реализуйте тему в коде через токены. Подключите токены к системному механизму платформы: Asset Catalog на iOS, DayNight и values-night на Android, darkTheme во Flutter, prefers-color-scheme в вебе.
6. Протестируйте на реальных устройствах. Проверьте приложение на OLED и LCD, в темноте и на улице, на разной яркости и с включённым режимом повышенного контраста. Отдельно пройдитесь по графикам, картам и встроенным веб-страницам.
7. Дайте пользователю выбор. Сделайте режим «как в системе» поведением по умолчанию, а в настройках предложите выбор светлой и тёмной темы, если он нужен продукту. Сохраняйте выбор между запусками.

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

Реализация на iOS, Android, Flutter и в вебе

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

iOS: SwiftUI и UIKit

В iOS цвета удобно хранить в Asset Catalog: у каждого цвета есть варианты Any Appearance и Dark, и система переключает их сама. Для стандартных элементов лучше брать семантические системные цвета — systemBackground, label, secondaryLabel: они уже адаптированы к обеим темам и к режиму повышенного контраста.

// SwiftUI: цвет из Asset Catalog и системный фон
Text("Баланс").foregroundStyle(Color("TextPrimary"))
    .background(Color(.systemBackground))
@Environment(\.colorScheme) var colorScheme   // .light или .dark

Если пользователь выбрал тему вручную, в UIKit её задают через overrideUserInterfaceStyle окна, а в SwiftUI — модификатором preferredColorScheme:

window?.overrideUserInterfaceStyle = .dark   // .light / .unspecified = как в системе

Ключ UIUserInterfaceStyle в Info.plist позволяет вообще отключить тёмную тему, но это временная мера: приложение, которое всегда светлое, выделяется на фоне остальных.

Android: DayNight, ресурсы и Compose

На Android тема приложения наследуется от Theme.Material3.DayNight (или Theme.MaterialComponents.DayNight), а цвета для тёмного режима кладут в ресурсы с квалификатором values-night. Система сама выбирает нужный набор.

<!-- res/values/themes.xml -->
<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorSurface">@color/surface</item>
</style>
<!-- res/values-night/colors.xml — значения @color/* для тёмной темы -->

Режим задаётся константами MODE_NIGHT_NO, MODE_NIGHT_YES и MODE_NIGHT_FOLLOW_SYSTEM — последняя рекомендуется по умолчанию. На Android 12 (API 31) и выше выбор пользователя передают через UiModeManager#setApplicationNightMode(), на более старых версиях — через AppCompat:

AppCompatDelegate.setDefaultNightMode(
    AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)

В Jetpack Compose тему выбирают по isSystemInDarkTheme():

val dark = isSystemInDarkTheme()
MaterialTheme(colorScheme = if (dark) darkScheme else lightScheme) { App() }

Есть и автоматический вариант — Force Dark: атрибут android:forceDarkAllowed="true" заставляет систему затемнить светлое приложение. Он не срабатывает, если тема уже тёмная или наследуется от DayNight. Алгоритм не знает ваших брендовых цветов и иллюстраций, поэтому Force Dark годится как временный костыль на пару релизов, а не как замена полноценной теме.

Flutter

Во Flutter обе темы описывают в MaterialApp через ThemeData: параметр theme — для светлой, darkTheme — для тёмной, а themeMode решает, какую показать (документация Flutter).

MaterialApp(
  theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: brand)),
  darkTheme: ThemeData(colorScheme: ColorScheme.fromSeed(
      seedColor: brand, brightness: Brightness.dark)),
  themeMode: ThemeMode.system, // или выбор пользователя
);

Плюс кроссплатформенного подхода в том, что одна палитра и одни токены работают сразу на iOS и Android. Минус — платформенные экраны (системные диалоги, нативные вставки) всё равно нужно проверять на каждой ОС отдельно.

Веб, PWA и WebView

В вебе системную тему читает медиазапрос prefers-color-scheme, а цвета удобно хранить в CSS-переменных. Это важно и для мобильных приложений: встроенные WebView-экраны (оферта, помощь, оплата) часто остаются белыми и выдают недоработанную тему.

:root { color-scheme: light dark; --bg: #ffffff; --text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: rgba(255, 255, 255, .87); }
}

Мета-тег <meta name="color-scheme" content="light dark"> подсказывает браузеру, что страница поддерживает обе темы, и он сразу окрашивает полосы прокрутки, поля ввода и фон при загрузке.

Платформа	Системный механизм	Ручной выбор	Подводный камень
iOS	Asset Catalog (Any / Dark), семантические цвета	overrideUserInterfaceStyle, preferredColorScheme	растровые картинки без тёмного варианта
Android (Views)	DayNight-тема, values-night	setApplicationNightMode() на API 31+, AppCompatDelegate ниже	соблазн оставить Force Dark навсегда
Android (Compose)	isSystemInDarkTheme(), MaterialTheme	своё состояние темы в настройках	цвета, заданные прямо в компонентах
Flutter	theme / darkTheme, ThemeMode.system	ThemeMode.light / ThemeMode.dark	нативные экраны и плагины вне темы
Веб, PWA, WebView	prefers-color-scheme, CSS-переменные	класс или атрибут на <html> + сохранение выбора	белая вспышка при загрузке страницы

Частые ошибки при создании тёмной темы

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

• Инверсия вместо дизайна. Цвета просто перевернули — и получили кислотные акценты, странные иллюстрации и потерянную иерархию.
• Чистый чёрный и чисто белый. Фон #000000 с текстом #FFFFFF даёт максимальный контраст, от которого быстро устают глаза.
• Тени вместо уровней. Карточки и диалоги сливаются с фоном, потому что глубину по-прежнему показывают тенью.
• Насыщенные акценты. Брендовый цвет из светлой темы «вибрирует» на тёмном фоне и плохо читается в виде текста.
• Забытые экраны. WebView, письма, пуш-уведомления, системные диалоги, splash-экран и экраны ошибок остаются светлыми.
• Растровые иконки и логотипы с белым фоном. Посреди тёмного экрана появляются белые прямоугольники.
• Нет выбора или он не сохраняется. Пользователь переключил тему, а после перезапуска приложение снова светлое.
• Непроверенные графики и карты. Линии и подписи на диаграммах, слои карт и цвета категорий подбирались под белый фон и в тёмной теме теряются.

Сколько стоит и сколько времени занимает

Стоимость тёмной темы определяется не столько числом экранов, сколько тем, как в приложении устроены цвета. Главные факторы трудоёмкости:

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

Ситуация	Относительная трудоёмкость	Что входит в работу
Новый продукт с токенами с первого дня	низкая	вторая палитра, проверка макетов в обеих темах, настройка переключения
Готовое приложение с дизайн-системой	средняя	тёмные значения токенов, аудит экранов, тёмные версии иллюстраций, тестирование
Legacy без токенов (цвета «зашиты» в код)	высокая	вынос цветов в токены по всему проекту, палитра, перерисовка графики, регресс всех экранов

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

Чек-лист тёмной темы перед релизом

Чек-лист тёмной темы помогает не выпустить в релиз «полутёмное» приложение. Перед публикацией проверьте:

• ☐ все цвета в коде берутся из семантических токенов, «голых» HEX-значений нет;
• ☐ базовый фон тёмно-серый, а не чистый чёрный;
• ☐ уровни поверхностей различимы: фон, карточки, меню, диалоги;
• ☐ все пары «текст — поверхность» проходят WCAG AA (4,5:1 и 3:1);
• ☐ акценты и статусные цвета адаптированы и не «вибрируют»;
• ☐ иконки векторные и окрашиваются токеном;
• ☐ у иллюстраций и логотипов есть тёмные или прозрачные версии;
• ☐ состояния кнопок (pressed, disabled, focus) видны в тёмной теме;
• ☐ WebView, splash-экран, системные диалоги и экраны ошибок тёмные;
• ☐ графики, диаграммы и карты читаются на тёмном фоне;
• ☐ по умолчанию стоит режим «как в системе», ручной выбор сохраняется;
• ☐ приложение проверено на OLED и LCD, в темноте и при ярком свете.

Найдем лучшее решение для вас

Частые вопросы о тёмной теме

Экономит ли тёмная тема батарею?

Только на OLED-экранах и заметно — только при высокой яркости. Исследование Университета Пердью показало: при автоматической яркости (30–50%) тёмный режим экономит в среднем 3–9% энергии, а при яркости 100% — 39–47%. На LCD-экранах подсветка горит целиком при любом цвете пикселей, поэтому выигрыша там практически нет.

Нужна ли тёмная тема каждому приложению?

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

Можно ли использовать чистый чёрный #000000?

Как основной фон — лучше не надо. На чистом чёрном белый текст выглядит слишком резким, а на OLED-экранах при прокрутке бывает заметно смазывание: пиксели включаются из полностью выключенного состояния с задержкой. Material Design рекомендует базовую поверхность #121212. Чистый чёрный уместен точечно — например, в полноэкранном просмотре фото и видео.

Делать ли в приложении переключатель или следовать системе?

По умолчанию — следовать системе: так тема меняется вместе с остальными приложениями и по расписанию. Дальше у платформ разные позиции: документация Android рекомендует дать в настройках выбор из трёх вариантов («светлая», «тёмная», «как в системе»), а Apple советует избегать отдельной настройки внешнего вида внутри приложения. Если переключатель всё же нужен, режим «как в системе» должен стоять по умолчанию, а выбор — сохраняться между запусками.

Какой контраст нужен в тёмной теме?

Те же требования WCAG, что и в светлой: не меньше 4,5:1 для обычного текста и 3:1 для крупного (уровень AA), 7:1 — для уровня AAA. Проверять нужно каждую пару «текст — поверхность», включая приподнятые карточки и диалоги, а не только основной фон. Белый с непрозрачностью 87% на #121212 даёт около 14:1 — запас большой, но без режущей глаз яркости.

Сколько времени занимает добавить темную тему в готовое приложение?

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

Что такое Force Dark и можно ли на него положиться?

Force Dark — механизм Android 10 и новее, который автоматически затемняет светлое приложение, если в теме указано android:forceDarkAllowed="true". Он не срабатывает, если тема уже тёмная или наследуется от DayNight. Это быстрый временный вариант: алгоритм не знает ваших брендовых цветов и иллюстраций, поэтому результат нужно проверять на каждом экране, а для релиза лучше сделать полноценную DayNight-тему.