Dark Mode — vad är det, mörkt gränssnittstema i mobilappar

Vad är Dark Mode och varför behövs det?

Dark Mode — är ett färgschema för gränssnittet där skärmens bakgrund är mörk (vanligtvis #121212 i Android, #1C1C1E i iOS) och text och gränssnittselement är ljusa. Till skillnad från enkel färginversion använder högkvalitativ Dark Mode en specialutvald palett: mörkgrå bakgrund istället för rent svart (minskar halo-effekten), låg mättnad på accentfärger och mjuka skuggor. Systemstöd för Dark Mode dök upp i iOS 13 (september 2019) och Android 10 (september 2019).

Huvudorsaken till implementering — användarkomfort. I svagt ljus (kvällar, i mörker) orsakar en ljus vit skärm ögonansträngning och kan utlösa huvudvärk. Dark Mode minskar skärmens ljusstyrka utan att förlora läsbarhet. För användare med fotofobi eller ljuskänslighet är mörkt tema inte ett alternativ, utan den enda möjligheten att använda appen bekvämt. Enligt Android Developers aktiverar mer än 30 % av Android-användarna mörkt tema permanent.

Dark Mode sparar batteri på OLED-skärmar. Till skillnad från LCD, där bakgrundsbelysningen alltid lyser, lyser OLED-pixlar självständigt. Mörk färg betyder att pixeln är avstängd — energiförbrukningen minskar. Enligt Google (Android Developers Blog, 2019) minskar Dark Mode på en Pixel med OLED-skärm vid 100 % ljusstyrka energiförbrukningen med 60 % jämfört med ljust tema. På LCD-skärmar är besparingen minimal (cirka 3–5 %), eftersom matrisens bakgrundsbelysning fungerar oberoende av pixelns färg.

Historia om Dark Mode i mobila operativsystem

Systemstöd Dark Mode gick igenom flera faser. iOS 13 (2019) introducerade globalt mörkt tema via UIUserInterfaceStyle. Android 10 (2019) lade till Force Dark Mode för appar utan eget mörkt tema. Android 12 (2021) med Material You började automatiskt generera mörk palett från bakgrundsbilden. iOS 15 (2021) utökade API för Safari och webbinnehåll. Enligt StatCounter (2026) stöder 82 % av topp 100-apparna i App Store och Google Play Dark Mode.

Dark Mode i iOS: Swift API och UIKit-stöd

iOS Dark Mode API är baserat på UITraitEnvironment-protokollet. Varje UIViewController och UIView har egenskapen traitCollection.userInterfaceStyle, som kan vara .unspecified, .light eller .dark. När systemtemat ändras anropar iOS metoden traitCollectionDidChange(_:). Utvecklaren måste uppdatera färgerna i denna metod eller använda dynamiska färger (UIColor(dynamicProvider:)) som automatiskt växlar mellan ljus och mörk palett.

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

// Tvångsaktivering av Dark Mode
window.overrideUserInterfaceStyle = .dark

Dynamiska färger — det bästa sättet att implementera Dark Mode i iOS. UIColor(named:) laddar automatiskt olika värden från Asset Catalog för .light och .dark-utseende. Det räcker att ställa in färgen i Assets.xcassets med två varianter (Any Appearance + Dark Appearance) och UIKit väljer själv rätt. Dynamiska systemfärger (UIColor.systemBackground, .label, .secondaryLabel) stöder redan Dark Mode och ändras automatiskt.

SwiftUI och Dark Mode

SwiftUI stöder Dark Mode direkt ur lådan. Alla standardfärger och modifierare (Color.primary, .background, Color(UIColor.systemBackground)) anpassar sig automatiskt. För anpassade färger, använd Color(uiColor:) med dynamisk UIColor eller miljövariabeln @Environment(\.colorScheme) för explicit kontroll av temat. SwiftUI View ritas automatiskt om när temat ändras, utan att behöva anropa 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 i Android: Kotlin API och AppCompat

Android Dark Mode implementeras via AppCompat-biblioteket och temat Theme.AppCompat.DayNight. På dagen används ljust tema, på natten — mörkt tema. Tvångsaktivering ställs in via AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (mörk), MODE_NIGHT_NO (ljus), MODE_NIGHT_FOLLOW_SYSTEM (system). Resurser delas upp i ljusa (res/values/styles.xml) och mörka (res/values-night/styles.xml).

// Tvångsaktivering av mörkt tema
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Inställning före super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Bestämning av aktuellt tema
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Registrering av nattläge i AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode — systemfunktion i Android 10+ som automatiskt inverterar färgerna på appar som inte stöder mörkt tema. Aktiveras via Utvecklaralternativ eller via attributet android:forceDarkAllowed="true" i temat. Detta är en tillfällig lösning: för produktion måste du implementera din egen mörka palett via values-night, annars blir den visuella kvaliteten låg (inverterade ikoner, dåligt läsbara färger).

Material You Dynamic Themes

Material You (Android 12+) genererar automatiskt 5 nyckelfärger från enhetens bakgrundsbild: primary, secondary, tertiary, neutral, neutralVariant. För varje färg skapas ljusa och mörka paletter. Utvecklaren använder attribut: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Systemet väljer själv variant för aktuellt tema. Dynamic Color stöds på Android 12+ med Material Design 3 (komponenten com.google.android.material:material).

// values/themes.xml — ljust tema
<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 — mörkt tema
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Design av mörkt tema: regler för kontrast och färg

Dark Mode-design — är inte bara färginversion. Google Material Design rekommenderar att använda mörkgrått (#121212) istället för rent svart. Rent svart (#000000) skapar för hög kontrast med vit text, vilket orsakar halo-effekt (ljuskrans runt bokstäver). Elementens elevationsnivå bestäms av färg: ju högre element, desto ljusare bakgrund. Kort på bakgrund — #1E1E1E, dialog — #2D2D2D, navigationspanel — #383838.

Färgkontrast i Dark Mode bör vara lägre än i Light Mode. Material Design rekommenderar: primary text — vit (#FFFFFF) med 87 % opacitet, secondary — 60 %, disabled — 38 %. Accentfärger bör vara mindre mättade: om i ljust tema primary = #6200EE, då i mörkt — #BB86FC (ljus, dämpad lila). Enligt WCAG 2.1 måste minsta kontrast 4.5:1 för vanlig text upprätthållas i båda teman.

Bilder och ikoner kräver separat behandling i mörkt tema. Ikoner med transparens bör målas om i ljus färg. Foton med ljus bakgrund kan verka bländande — det rekommenderas att minska ljusstyrkan med 20–30 % eller lägga till ett halvgenomskinligt överlägg. För logotyper och varumärkeselement, använd versionen för mörk bakgrund. iOS Asset Catalog och Android VectorDrawable stöder separata resurser för ljust och mörkt tema.

Jämförelse av Dark Mode och Light Mode: för- och nackdelar

Val mellan teman beror på användningsförhållanden, innehållstyp och användarpreferenser. Forskning från Nielsen Norman Group (2020) visade: i normalt ljus ger Light Mode 15–20 % högre läshastighet. Men i svagt ljus minskar Dark Mode ögontrötthet och förbättrar läsbarheten. För gränssnitt med stor textvolym (artiklar, dokument) är Light Mode vanligtvis att föredra.

Energiförbrukning — nyckelargumentet för Dark Mode på OLED. Enligt Google (2019) förbrukar YouTube i mörkt tema på OLED-skärm 43 % mindre energi än i ljust tema. Google Maps — 32 %. Ju ljusare gränssnitt och ju högre ljusstyrka, desto mer betydande är besparingen. På LCD-skärmar överstiger inte besparingen 5 %. För användare som arbetar mycket med appen utomhus i starkt solljus förblir Light Mode det enda läsbara alternativet.

IT Sectr rekommendationer — vi implementerar båda teman med växlingsmöjlighet: system (follow system), mörk, ljus. Automatisk växling bör inte vara det enda alternativet — användaren kan vilja ha mörkt tema på dagen (vid migrän) eller ljust tema på natten (vid läsning). I våra projekt lägger vi till temaväxlaren i profilinställningarna och kommer ihåg valet. För appar med premiuminnehåll (foto, video) rekommenderas förhandsvisning av tema innan tillämpning.