Dark Mode — что это, темная тема интерфейса в мобильных приложениях

Что такое Dark Mode и зачем он нужен?

Dark Mode — это цветовая схема интерфейса, в которой фон экрана тёмный (обычно #121212 в Android, #1C1C1E в iOS), а текст и элементы интерфейса светлые. В отличие от простой инверсии цветов, качественный Dark Mode использует специально подобранную палитру: тёмно-серый фон вместо чистого чёрного (снижает гало-эффект), пониженную насыщенность акцентных цветов и мягкие тени. Системная поддержка Dark Mode появилась в iOS 13 (сентябрь 2019) и Android 10 (сентябрь 2019).

Основная причина внедрения — пользовательский комфорт. При слабом освещении (вечером, в темноте) яркий белый экран вызывает напряжение глаз и может провоцировать головную боль. Dark Mode снижает яркость экрана без потери читаемости. Для пользователей с фотофобией или светочувствительностью тёмная тема — не опция, а единственная возможность комфортно пользоваться приложением. По данным Android Developers, более 30% пользователей Android включают тёмную тему постоянно.

Dark Mode экономит заряд батареи на OLED-экранах. В отличие от LCD, где подсветка горит всегда, OLED-пиксели светятся самостоятельно. Тёмный цвет означает, что пиксель выключен — энергопотребление падает. По данным Google (Android Developers Blog, 2019), на Pixel с OLED-экраном Dark Mode при 100% яркости снижает энергопотребление на 60% по сравнению со светлой темой. На LCD-экранах экономия минимальна (около 3–5%), поскольку подсветка матрицы работает независимо от цвета пикселей.

История Dark Mode в мобильных ОС

Системная поддержка Dark Mode прошла несколько этапов. iOS 13 (2019) ввела глобальную тёмную тему через UIUserInterfaceStyle. Android 10 (2019) добавила Force Dark Mode для приложений без собственной тёмной темы. Android 12 (2021) с Material You начал автоматически генерировать тёмную палитру из обоев. iOS 15 (2021) расширила API для Safari и веб-контента. По данным StatCounter (2026), 82% топ-100 приложений в App Store и Google Play поддерживают Dark Mode.

Dark Mode в iOS: Swift API и поддержка UIKit

iOS Dark Mode API основан на протоколе UITraitEnvironment. Каждый UIViewController и UIView имеет свойство traitCollection.userInterfaceStyle, которое может быть .unspecified, .light или .dark. При изменении системной темы iOS вызывает метод traitCollectionDidChange(_:). Разработчик должен обновить цвета в этом методе, либо использовать динамические цвета (UIColor(dynamicProvider:)), которые автоматически переключаются между светлой и тёмной палитрой.

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// Принудительное включение Dark Mode
window.overrideUserInterfaceStyle = .dark

Динамические цвета — лучший способ реализации Dark Mode в iOS. UIColor(named:) автоматически подгружает разные значения из Asset Catalog для .light и .dark appearance. Достаточно задать цвет в Assets.xcassets с двумя вариантами (Any Appearance + Dark Appearance), и UIKit сам выберет нужный. Dynamic system colors (UIColor.systemBackground, .label, .secondaryLabel) уже поддерживают Dark Mode и меняются автоматически.

SwiftUI и Dark Mode

SwiftUI поддерживает Dark Mode из коробки. Все стандартные цвета и модификаторы (Color.primary, .background, Color(UIColor.systemBackground)) автоматически адаптируются. Для кастомных цветов используйте Color(uiColor:) с динамическим UIColor или переменную среды @Environment(\.colorScheme) для явной проверки темы. SwiftUI View автоматически перерисовывается при смене темы, без необходимости вызывать traitCollectionDidChange.

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Dark Mode")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Dark Mode в Android: Kotlin API и AppCompat

Android Dark Mode реализуется через библиотеку AppCompat и тему Theme.AppCompat.DayNight. Днём используется светлая тема, ночью — тёмная. Принудительное включение задаётся через AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (тёмная), MODE_NIGHT_NO (светлая), MODE_NIGHT_FOLLOW_SYSTEM (системная). Ресурсы разделяются на светлые (res/values/styles.xml) и тёмные (res/values-night/styles.xml).

// Принудительное включение тёмной темы
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Установка до super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Определение текущей темы
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Регистрация ночного режима в AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — системная функция Android 10+, которая автоматически инвертирует цвета приложения, не поддерживающего тёмную тему. Включается через Настройки разработчика или через атрибут android:forceDarkAllowed="true" в теме. Это временное решение: для продакшена нужно реализовать собственную тёмную палитру через values-night, иначе визуальное качество будет низким (инвертированные иконки, плохо читаемые цвета).

Material You Dynamic Themes

Material You (Android 12+) автоматически генерирует 5 ключевых цветов из обоев устройства: primary, secondary, tertiary, neutral, neutralVariant. Для каждого цвета создаются светлая и тёмная палитры. Разработчик использует атрибуты: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Система сама выбирает вариант для текущей темы. Dynamic Color поддерживается на Android 12+ с Material Design 3 (компонент com.google.android.material:material).

// values/themes.xml — светлая тема
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — тёмная тема
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

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

Дизайн Dark Mode — не просто инверсия цветов. Google Material Design рекомендует использовать тёмно-серый (#121212) вместо чистого чёрного. Чистый чёрный (#000000) создаёт слишком высокий контраст с белым текстом, вызывая гало-эффект (ореол вокруг букв). Уровень elevation (возвышения) элементов задаётся через цвет: чем выше элемент, тем светлее его фон. Карточка поверх фона — #1E1E1E, диалог — #2D2D2D, панель навигации — #383838.

Цветовой контраст в Dark Mode должен быть ниже, чем в Light Mode. Material Design рекомендует: текст primary — белый (#FFFFFF) с непрозрачностью 87%, secondary — 60%, disabled — 38%. Акцентные цвета должны быть менее насыщенными: если в светлой теме primary = #6200EE, то в тёмной — #BB86FC (светлый, приглушённый фиолетовый). По данным WCAG 2.1, минимальный контраст 4.5:1 для обычного текста должен соблюдаться в обеих темах.

Изображения и иконки требуют отдельной обработки в тёмной теме. Иконки с прозрачностью должны быть перекрашены в светлый цвет. Фотографии с ярким фоном могут выглядеть ослепляюще — рекомендуется уменьшить яркость на 20–30% или добавить полупрозрачный оверлей. Для логотипов и брендовых элементов используйте версию для тёмного фона. iOS Asset Catalog и Android VectorDrawable поддерживают отдельные ресурсы для светлой и тёмной темы.

Сравнение Dark Mode и Light Mode: плюсы и минусы

Выбор между темами зависит от условий использования, типа контента и предпочтений пользователя. Исследование Nielsen Norman Group (2020) показало: при нормальном освещении Light Mode обеспечивает на 15–20% более высокую скорость чтения. Однако в условиях низкой освещённости Dark Mode снижает утомляемость глаз и улучшает читаемость. Для интерфейсов с большим объёмом текста (статьи, документы) Light Mode обычно предпочтительнее.

Энергопотребление — ключевой аргумент для Dark Mode на OLED. По данным Google (2019), YouTube в тёмной теме на OLED-экране потребляет на 43% меньше энергии, чем в светлой. Google Maps — на 32%. Чем ярче интерфейс и чем выше уровень яркости экрана, тем значительнее экономия. На LCD-экранах экономия не превышает 5%. Для пользователей, которые много работают с приложением на улице при ярком солнце, Light Mode остаётся единственным читаемым вариантом.

Рекомендации IT Sectr — мы реализуем обе темы с возможностью переключения: системная (follow system), тёмная, светлая. Автоматическое переключение не должно быть единственным вариантом — пользователь может хотеть тёмную тему днём (при мигрени) или светлую ночью (при чтении). В наших проектах мы добавляем переключатель темы в настройки профиля и запоминаем выбор. Для приложений с премиальным контентом (фото, видео) рекомендуется предпросмотр темы перед применением.