Dark Mode — what it is, dark interface theme in mobile applications

What is Dark Mode and why is it needed?

Dark Mode is a color scheme where the screen background is dark (usually #121212 in Android, #1C1C1E in iOS), while text and interface elements are light. Unlike simple color inversion, quality Dark Mode uses a carefully selected palette: dark gray background instead of pure black (reduces halo effect), reduced saturation of accent colors, and soft shadows. System-level Dark Mode support appeared in iOS 13 (September 2019) and Android 10 (September 2019).

The main reason for adoption is user comfort. In low light conditions (evening, darkness), a bright white screen causes eye strain and can trigger headaches. Dark Mode reduces screen brightness without sacrificing readability. For users with photophobia or light sensitivity, a dark theme is not an option but the only way to comfortably use an application. According to Android Developers, over 30% of Android users keep dark theme enabled at all times.

Dark Mode saves battery life on OLED screens. Unlike LCD, where the backlight is always on, OLED pixels illuminate themselves. A dark color means the pixel is off — power consumption drops. According to Google (Android Developers Blog, 2019), on a Pixel with an OLED display, Dark Mode at 100% brightness reduces power consumption by 60% compared to light theme. On LCD screens, savings are minimal (about 3–5%) because the matrix backlight operates independently of pixel color.

History of Dark Mode in mobile OS

System support for Dark Mode has gone through several stages. iOS 13 (2019) introduced a global dark theme via UIUserInterfaceStyle. Android 10 (2019) added Force Dark Mode for apps without their own dark theme. Android 12 (2021) with Material You began automatically generating a dark palette from wallpapers. iOS 15 (2021) expanded the API for Safari and web content. According to StatCounter (2026), 82% of the top 100 apps in the App Store and Google Play support Dark Mode.

Dark Mode in iOS: Swift API and UIKit support

iOS Dark Mode API is based on the UITraitEnvironment protocol. Every UIViewController and UIView has the traitCollection.userInterfaceStyle property, which can be .unspecified, .light, or .dark. When the system theme changes, iOS calls the traitCollectionDidChange(_:) method. The developer must update colors in this method, or use dynamic colors (UIColor(dynamicProvider:)) that automatically switch between light and dark palettes.

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
    }
}

// Force Dark Mode Enable
window.overrideUserInterfaceStyle = .dark

Dynamic colors — the best way to implement Dark Mode in iOS. UIColor(named:) automatically loads different values from the Asset Catalog for .light and .dark appearance. Just define a color in Assets.xcassets with two variants (Any Appearance + Dark Appearance), and UIKit will select the right one automatically. Dynamic system colors (UIColor.systemBackground, .label, .secondaryLabel) already support Dark Mode and change automatically.

SwiftUI and Dark Mode

SwiftUI supports Dark Mode out of the box. All standard colors and modifiers (Color.primary, .background, Color(UIColor.systemBackground)) adapt automatically. For custom colors, use Color(uiColor:) with a dynamic UIColor or the @Environment(\.colorScheme) variable for explicit theme checking. SwiftUI View automatically redraws when the theme changes, without needing to call 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 in Android: Kotlin API and AppCompat

Android Dark Mode is implemented through the AppCompat library and Theme.AppCompat.DayNight theme. During the day a light theme is used, at night — a dark one. Force enable is set via AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (dark), MODE_NIGHT_NO (light), MODE_NIGHT_FOLLOW_SYSTEM (system). Resources are separated into light (res/values/styles.xml) and dark (res/values-night/styles.xml).

// Force dark theme enable
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Set before super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Determine current theme
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Register night mode in AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode is a system feature in Android 10+ that automatically inverts colors of apps without dark theme support. It is enabled through Developer Options or via the android:forceDarkAllowed="true" attribute in the theme. This is a temporary solution: for production, you need to implement your own dark palette through values-night, otherwise visual quality will be poor (inverted icons, hard-to-read colors).

Material You Dynamic Themes

Material You (Android 12+) automatically generates 5 key colors from the device wallpaper: primary, secondary, tertiary, neutral, neutralVariant. For each color, light and dark palettes are created. The developer uses attributes: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. The system itself selects the variant for the current theme. Dynamic Color is supported on Android 12+ with Material Design 3 (com.google.android.material:material component).

// values/themes.xml — light theme
<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 — dark theme
<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 theme design: contrast and color rules

Dark Mode design is not just color inversion. Google Material Design recommends using dark gray (#121212) instead of pure black. Pure black (#000000) creates too high contrast with white text, causing a halo effect (glow around letters). Element elevation is expressed through color: the higher the element, the lighter its background. A card on top of the background — #1E1E1E, dialog — #2D2D2D, navigation panel — #383838.

Color contrast in Dark Mode should be lower than in Light Mode. Material Design recommends: primary text — white (#FFFFFF) at 87% opacity, secondary — 60%, disabled — 38%. Accent colors should be less saturated: if in light theme primary = #6200EE, then in dark — #BB86FC (light, muted purple). According to WCAG 2.1, a minimum contrast of 4.5:1 for normal text must be maintained in both themes.

Images and icons require separate handling in dark theme. Icons with transparency should be recolored to light colors. Photos with bright backgrounds can be glaring — it is recommended to reduce brightness by 20–30% or add a semi-transparent overlay. For logos and brand elements, use the version for dark background. iOS Asset Catalog and Android VectorDrawable support separate resources for light and dark themes.

Dark Mode vs Light Mode: pros and cons

Choosing between themes depends on usage conditions, content type, and user preferences. A Nielsen Norman Group study (2020) showed: under normal lighting, Light Mode provides 15–20% higher reading speed. However, in low light conditions, Dark Mode reduces eye fatigue and improves readability. For interfaces with large amounts of text (articles, documents), Light Mode is usually preferable.

Power consumption is a key argument for Dark Mode on OLED. According to Google (2019), YouTube in dark theme on an OLED screen consumes 43% less energy than in light theme. Google Maps — 32%. The brighter the interface and the higher the screen brightness level, the greater the savings. On LCD screens, savings do not exceed 5%. For users who work extensively with the app outdoors in bright sunlight, Light Mode remains the only readable option.

IT Sectr recommendations — we implement both themes with switching options: system (follow system), dark, light. Auto-switching should not be the only option — a user might want dark theme during the day (for migraines) or light theme at night (for reading). In our projects, we add a theme toggle in profile settings and remember the choice. For apps with premium content (photos, video), theme preview before applying is recommended.