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 εμφάνιση. Αρκεί να ορίσετε το χρώμα στο Assets.xcassets με δύο παραλλαγές (Any Appearance + Dark Appearance) και το UIKit θα επιλέξει μόνο του το κατάλληλο. Τα δυναμικά χρώματα συστήματος (UIColor.systemBackground, .label, .secondaryLabel) υποστηρίζουν ήδη Dark Mode και αλλάζουν αυτόματα.

SwiftUI και Dark Mode

SwiftUI υποστηρίζει Dark Mode out of the box. Όλα τα τυπικά χρώματα και τροποποιητές (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), σκούρο, ανοιχτόχρωμο. Η αυτόματη εναλλαγή δεν πρέπει να είναι η μόνη επιλογή — ο χρήστης μπορεί να θέλει σκούρο θέμα την ημέρα (σε περίπτωση ημικρανίας) ή ανοιχτόχρωμο θέμα τη νύχτα (κατά την ανάγνωση). Στα έργα μας, προσθέτουμε διακόπτη θέματος στις ρυθμίσεις προφίλ και αποθηκεύουμε την επιλογή. Για εφαρμογές με περιεχόμενο premium (φωτογραφία, βίντεο), συνιστάται προεπισκόπηση θέματος πριν από την εφαρμογή.