Темний режим — що це, темна тема інтерфейсу в мобільних додатках

Що таке Темний режим і навіщо він потрібен?

Темний режим — це колірна схема, в якій фон екрана темний (зазвичай #121212 в Android, #1C1C1E в iOS), а текст та елементи інтерфейсу світлі. На відміну від простої інверсії кольорів, якісний Темний режим використовує спеціально підібрану палітру: темно-сірий фон замість чистого чорного (знижує гало-ефект), знижену насиченість акцентних кольорів та м'які тіні. Системна підтримка Темного режиму з'явилася в iOS 13 (вересень 2019) та Android 10 (вересень 2019).

Основна причина впровадження — комфорт користувача. При слабкому освітленні (ввечері, в темряві) яскравий білий екран викликає напруження очей і може провокувати головний біль. Темний режим знижує яскравість екрана без втрати читабельності. Для користувачів із фотофобією або світлочутливістю темна тема — не опція, а єдина можливість комфортно користуватися додатком. За даними Android Developers, понад 30% користувачів Android вмикають темну тему постійно.

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

Історія Темного режиму в мобільних ОС

Системна підтримка Темного режиму пройшла кілька етапів. 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 підтримують Темний режим.

Темний режим в iOS: Swift API та підтримка UIKit

iOS Темний режим 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
    }
}

// Примусове ввімкнення Темного режиму
window.overrideUserInterfaceStyle = .dark

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

SwiftUI та Темний режим

SwiftUI підтримує Темний режим з коробки. Всі стандартні кольори та модифікатори (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("Темний режим")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Темний режим в Android: Kotlin API та AppCompat

Android Темний режим реалізується через бібліотеку 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>

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

Дизайн Темного режиму — не просто інверсія кольорів. Google Material Design рекомендує використовувати темно-сірий (#121212) замість чистого чорного. Чистий чорний (#000000) створює надто високий контраст з білим текстом, викликаючи гало-ефект (ореол навколо літер). Рівень elevation (піднесення) елементів задається через колір: чим вищий елемент, тим світліший його фон. Картка поверх фону — #1E1E1E, діалог — #2D2D2D, панель навігації — #383838.

Кольоровий контраст у Темному режимі повинен бути нижчим, ніж у Світлому режимі. 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 підтримують окремі ресурси для світлої та темної теми.

Порівняння Темного режиму та Світлого режиму: плюси та мінуси

Вибір між темами залежить від умов використання, типу контенту та вподобань користувача. Дослідження Nielsen Norman Group (2020) показало: при нормальному освітленні Світлий режим забезпечує на 15–20% вищу швидкість читання. Однак в умовах низької освітленості Темний режим знижує стомлюваність очей і покращує читабельність. Для інтерфейсів з великим обсягом тексту (статті, документи) Світлий режим зазвичай кращий.

Енергоспоживання — ключовий аргумент для Темного режиму на OLED. За даними Google (2019), YouTube у темній темі на OLED-екрані споживає на 43% менше енергії, ніж у світлій. Google Maps — на 32%. Чим яскравіший інтерфейс і чим вищий рівень яскравості екрана, тим значніша економія. На LCD-екранах економія не перевищує 5%. Для користувачів, які багато працюють з додатком на вулиці при яскравому сонці, Світлий режим залишається єдиним читабельним варіантом.

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