Dark Mode — wat is het, donkere interfacemodus in mobiele apps

Wat is Dark Mode en waarom is het nodig?

Dark Mode — is een kleurenschema van de interface waarbij de achtergrond donker is (meestal #121212 in Android, #1C1C1E in iOS) en tekst en interface-elementen licht zijn. In tegenstelling tot simpele kleurinversie gebruikt kwalitatieve Dark Mode een speciaal geselecteerd palet: donkergrijze achtergrond in plaats van puur zwart (vermindert het halo-effect), lagere verzadiging van accentkleuren en zachte schaduwen. Systeemondersteuning voor Dark Mode verscheen in iOS 13 (september 2019) en Android 10 (september 2019).

Belangrijkste reden voor implementatie — gebruikerscomfort. Bij weinig licht ('s avonds, in het donker) veroorzaakt een helder wit scherm oogspanning en kan hoofdpijn veroorzaken. Dark Mode vermindert de schermhelderheid zonder verlies van leesbaarheid. Voor gebruikers met fotofobie of lichtgevoeligheid is de donkere modus geen optie, maar de enige manier om de app comfortabel te gebruiken. Volgens Android Developers schakelt meer dan 30% van de Android-gebruikers de donkere modus permanent in.

Dark Mode bespaart batterij op OLED-schermen. In tegenstelling tot LCD, waarbij de achtergrondverlichting altijd brandt, lichten OLED-pixels zelfstandig op. Donkere kleur betekent dat de pixel is uitgeschakeld — energieverbruik daalt. Volgens Google (Android Developers Blog, 2019) vermindert Dark Mode op een Pixel met OLED-scherm bij 100% helderheid het energieverbruik met 60% vergeleken met de lichte modus. Op LCD-schermen is de besparing minimaal (ongeveer 3–5%), omdat de matrixachtergrondverlichting onafhankelijk van de pixelkleur werkt.

Geschiedenis van Dark Mode in mobiele besturingssystemen

Systeemondersteuning Dark Mode doorliep verschillende fasen. iOS 13 (2019) introduceerde de wereldwijde donkere modus via UIUserInterfaceStyle. Android 10 (2019) voegde Force Dark Mode toe voor apps zonder eigen donkere modus. Android 12 (2021) met Material You begon automatisch een donker palet uit de achtergrond te genereren. iOS 15 (2021) breidde de API uit voor Safari en webinhoud. Volgens StatCounter (2026) ondersteunt 82% van de top 100 apps in App Store en Google Play Dark Mode.

Dark Mode in iOS: Swift API en UIKit-ondersteuning

iOS Dark Mode API is gebaseerd op het UITraitEnvironment-protocol. Elke UIViewController en UIView heeft de eigenschap traitCollection.userInterfaceStyle, die .unspecified, .light of .dark kan zijn. Bij wijziging van de systeemmodus roept iOS de methode traitCollectionDidChange(_:) aan. De ontwikkelaar moet de kleuren in deze methode bijwerken of dynamische kleuren gebruiken (UIColor(dynamicProvider:)) die automatisch schakelen tussen het lichte en donkere palet.

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

// Geforceerd inschakelen van Dark Mode
window.overrideUserInterfaceStyle = .dark

Dynamische kleuren — de beste manier om Dark Mode in iOS te implementeren. UIColor(named:) laadt automatisch verschillende waarden uit Asset Catalog voor .light en .dark appearance. Het volstaat om de kleur in Assets.xcassets in te stellen met twee varianten (Any Appearance + Dark Appearance) en UIKit kiest zelf de juiste. Dynamische systeemkleuren (UIColor.systemBackground, .label, .secondaryLabel) ondersteunen al Dark Mode en veranderen automatisch.

SwiftUI en Dark Mode

SwiftUI ondersteunt Dark Mode uit de doos. Alle standaardkleuren en modifiers (Color.primary, .background, Color(UIColor.systemBackground)) passen zich automatisch aan. Gebruik voor aangepaste kleuren Color(uiColor:) met dynamische UIColor of de omgevingsvariabele @Environment(\.colorScheme) voor expliciete controle van de modus. SwiftUI View wordt automatisch opnieuw getekend bij wijziging van de modus, zonder dat traitCollectionDidChange hoeft te worden aangeroepen.

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 en AppCompat

Android Dark Mode wordt geïmplementeerd via de AppCompat-bibliotheek en het thema Theme.AppCompat.DayNight. Overdag wordt de lichte modus gebruikt, 's nachts de donkere. Geforceerd inschakelen wordt ingesteld via AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (donker), MODE_NIGHT_NO (licht), MODE_NIGHT_FOLLOW_SYSTEM (systeem). Resources worden verdeeld in lichte (res/values/styles.xml) en donkere (res/values-night/styles.xml).

// Geforceerd inschakelen van donkere modus
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Instellen vóór super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Huidige modus bepalen
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Nachtmodus registreren in AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — systeemfunctie van Android 10+ die automatisch de kleuren inverteert van apps die de donkere modus niet ondersteunen. Wordt ingeschakeld via Ontwikkelaarsopties of via het attribuut android:forceDarkAllowed="true" in het thema. Dit is een tijdelijke oplossing: voor productie moet u een eigen donker palet implementeren via values-night, anders is de visuele kwaliteit laag (geïnverteerde pictogrammen, slecht leesbare kleuren).

Material You Dynamic Themes

Material You (Android 12+) genereert automatisch 5 kernkleuren uit de achtergrond van het apparaat: primary, secondary, tertiary, neutral, neutralVariant. Voor elke kleur worden lichte en donkere paletten gemaakt. De ontwikkelaar gebruikt attributen: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Het systeem kiest zelf de variant voor de huidige modus. Dynamic Color wordt ondersteund op Android 12+ met Material Design 3 (component com.google.android.material:material).

// values/themes.xml — lichte modus
<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 — donkere modus
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Ontwerp van donkere modus: regels voor contrast en kleur

Dark Mode-ontwerp — is niet alleen kleurinversie. Google Material Design beveelt het gebruik van donkergrijs (#121212) aan in plaats van puur zwart. Puur zwart (#000000) creëert een te hoog contrast met witte tekst, wat een halo-effect (lichtkrans rond letters) veroorzaakt. Het elevatieniveau van elementen wordt bepaald door kleur: hoe hoger het element, hoe lichter de achtergrond. Kaart op achtergrond — #1E1E1E, dialoog — #2D2D2D, navigatiepaneel — #383838.

Kleurcontrast in Dark Mode moet lager zijn dan in Light Mode. Material Design beveelt aan: primary tekst — wit (#FFFFFF) met 87% dekking, secondary — 60%, disabled — 38%. Accentkleuren moeten minder verzadigd zijn: als in de lichte modus primary = #6200EE, dan in de donkere — #BB86FC (licht, gedempt paars). Volgens WCAG 2.1 moet een minimaal contrast van 4.5:1 voor gewone tekst in beide modi worden gehandhaafd.

Afbeeldingen en pictogrammen vereisen aparte verwerking in de donkere modus. Pictogrammen met transparantie moeten worden overgeschilderd in een lichte kleur. Foto's met een lichte achtergrond kunnen verblindend lijken — het wordt aanbevolen de helderheid met 20–30% te verminderen of een halfdoorzichtige overlay toe te voegen. Gebruik voor logo's en merkelementen de versie voor donkere achtergrond. iOS Asset Catalog en Android VectorDrawable ondersteunen aparte resources voor lichte en donkere modus.

Vergelijking Dark Mode en Light Mode: voor- en nadelen

Keuze tussen modi hangt af van gebruiksomstandigheden, type inhoud en gebruikersvoorkeuren. Onderzoek van Nielsen Norman Group (2020) toonde aan: bij normaal licht zorgt Light Mode voor 15–20% hogere leessnelheid. Echter, bij weinig licht vermindert Dark Mode oogvermoeidheid en verbetert de leesbaarheid. Voor interfaces met veel tekst (artikelen, documenten) heeft Light Mode meestal de voorkeur.

Energieverbruik — het belangrijkste argument voor Dark Mode op OLED. Volgens Google (2019) verbruikt YouTube in de donkere modus op een OLED-scherm 43% minder energie dan in de lichte modus. Google Maps — 32%. Hoe helderder de interface en hoe hoger het helderheidsniveau, hoe significanter de besparing. Op LCD-schermen bedraagt de besparing niet meer dan 5%. Voor gebruikers die veel met de app buiten in fel zonlicht werken, blijft Light Mode de enige leesbare optie.

Aanbevelingen IT Sectr — we implementeren beide modi met schakelmogelijkheid: systeem (follow system), donker, licht. Automatisch schakelen mag niet de enige optie zijn — de gebruiker kan overdag (bij migraine) de donkere modus willen of 's nachts (bij het lezen) de lichte modus. In onze projecten voegen we een modusschakelaar toe in de profielinstellingen en onthouden we de keuze. Voor apps met premium content (foto, video) wordt aanbevolen een voorbeeld van de modus te tonen voordat deze wordt toegepast.