Σκοτεινή κατάσταση και οπτική άνεση

1) Γιατί ένα σκοτεινό θέμα

άνεση των ματιών σε χαμηλό φως, λιγότερη λάμψη και «φωτεινές αναλαμπές».
Ενέργεια: Οι σκοτεινές οθόνες ξοδεύουν λιγότερη μπαταρία σε OLED/AMOLED.
Εστίαση στα δεδομένα: εστίαση στο περιεχόμενο και όχι στο υπόβαθρο.
Προσδοκίες χρήστη: η σημαία συστήματος «προτιμά-χρώμα-σχήμα» είναι το de facto πρότυπο.

2) Αρχές

1. Σκούρο γκρι φόντο> καθαρό μαύρο για επιφάνειες UI (καλύτερη αναγνωσιμότητα και διαβάθμιση).
2. Αντίθεση σε περιεχόμενο: όχι «λευκό σε μαύρο», αλλά μαλακές αποχρώσεις για μεγάλα κείμενα.
3. Προσεκτική «φωτεινότητα»: οι οπίσθιοι φανοί/προφορές είναι μπερδεμένες, αλλά διακριτές.
4. Σκιά-βάθος: δουλεύουμε με ελαφρά/θολή σκιά, όχι απότομη αντίθεση.
5. Διαθεσιμότητα: WCAG AA (ελάχιστη), ορατή εστίαση και κατανοητές καταστάσεις.
6. Οι ρυθμίσεις του συστήματος είναι πρωταρχικές: αυτόματη αλλαγή και «μειωμένη κίνηση».

3) Παλέτα και μάρκες (παράδειγμα)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Οι προφορές στη σκοτεινή κατάσταση είναι + 8-12% ελαφρύτερες από ό, τι στη φωτεινή κατάσταση.
• Χρησιμοποιήστε κλίμακα γκρι (4-5 βήματα), αποφεύγοντας την απόλυτη # 000 για μεγάλες εκτάσεις (εξαίρεση - AMOLED mode).

4) Κείμενο και αναγνωσιμότητα

Κείμενο σώματος: light gray '# E6E8EB' to '# 0E116' (αντίθεση ~ 12:1).
Δευτερεύον κείμενο: «# A6AEB8», υποδείξεις - ένα βήμα πιο σκούρο/πιο διαφανές.
Μακροχρόνια ανάγνωση: ελαφρώς θερμές αποχρώσεις (μειώστε το «φωτοστέφανο»).
Σύνδεσμοι - προφορά + υπογραμμίστε εξ ορισμού· χρώμα ≠ το μοναδικό μέσο νοήματος.

5) Επιφάνειες, βάθος και γυαλί

Ανυψώσεις: 'βάση' → 'υψόμετρο 1' → 'υψόμετρο 2', κάθε στρώμα είναι ελαφρύτερο/θερμότερο κατά 2-4%.
Οι σκιές είναι μαλακές, πλατιές, με χαμηλή αδιαφάνεια. αποφυγή «λαμπερών» εγκεφαλικών επεισοδίων.
Τα ημιδιαφανή πάνελ (blur) είναι μετρίως κατάλληλα· αντιπαραβάλλουν το κείμενο με το κάτω μέρος.
Οι οριοθετητές είναι ημι-λεπτά όρια '--bd-μαλακά' ή μόλις ορατά «κληρονόμοι».

6) Κράτη και εστίαση

Αιώρηση: + 2-3% ελαφρύτερο φόντο. Ενεργό: − 2-3% (πιο σκούρο).
Εστίαση: καθαρός δακτύλιος (π.χ. 'outline: 2px solid # 6EA0FF; περίγραμμα-όφσετ: 2px· "), ορατό στα κουμπιά προφοράς.
Άτομα με ειδικές ανάγκες: μείωση της αντίθεσης με προσοχή· δεν πέφτουν κάτω από το αναγνώσιμο επίπεδο για το κείμενο.

7) Κουμπιά, έντυπα και πίνακες

Πρωταρχικό: φόντο '- προφορά', κείμενο '# 0E1116'.
Δευτερογενής: υπόβαθρο '--bg-elev1', σύνορο '-bd-ισχυρό', κείμενο '-fg-πρωτογενές'.
Πεδία εισόδου: φόντο '--bg-elev1', με εστίαση - σύνορα προφοράς· ο κάτοχος θέσης είναι πιο βαρετός, αλλά ευανάγνωστος.
Πίνακες: το φόντο της ζέβρας είναι ελάχιστα ορατό, η επιλογή της γραμμής στο hover είναι + 2-3% ελαφρύτερη.

8) Εικονογραφήσεις, λογότυπα και φωτογραφίες

Λογότυπα και εικονογράμματα - εκδόσεις αντιστροφής στο σκοτάδι. αποφυγή λεπτών, φωτεινών γραμμών σε κορεσμένο φόντο.
Φωτογραφία: Προσθήκη σκοτεινής μάσκας (40-60%) για αντιπαραβολή κεφαλίδων στην κορυφή.
Εικονίδια: μονό πάχος, περίγραμμα + γέμιση - κατά κατάσταση, όχι «δηλητηριώδη» χρώματα.

9) Απεικόνιση δεδομένων σε ένα σκοτεινό θέμα

Τα χρώματα των γραμμών είναι μέτριου κορεσμού. τουλάχιστον 5 διακριτοί τόνοι.
Πλέγματα και άξονες - μεταλλαγμένα (άλφα 20-30%), υπογραφές - '-fg-muted'.
Οι σχολιασμοί/περιστατικά είναι ζωηρές αλλά ευανάγνωστες. υπογραμμίζουν με σχήμα/δείκτη, όχι μόνο το χρώμα.
Κενά δεδομένα/υστέρηση - μαλακές «ομίχλη», όχι λευκά πεδία.

10) Επιδόσεις και συσσωρευτές

OLED πραγματικά εξοικονομεί καθαρό μαύρο (# 000) - χρήση σε AMOLED λειτουργία σύμφωνα με την επιλογή χρήστη.
Αποφεύγεται η συμπαγής μεγάλη λάμψη/θολερότητα σε ασθενείς GPU.
Σεβασμός «προτιμώμενη-μειωμένη κίνηση»: Απλοποίηση κινουμένων σχεδίων/μεταβάσεων.

11) Συμπεριφορά και αλλαγή

Το προκαθορισμένο είναι να ακολουθήσετε το 'prefers-color-scheme'.
Δώστε στο χρήστη ρητό διακόπτη (Light/Dark/System), κρατήστε την επιλογή (cookie/localStorage).
Κατά την αλλαγή του θέματος - χωρίς αναλαμπές: προ-προσθήκη κλάσης θέματος πριν την απόδοση.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Διαθεσιμότητα (A11y)

Αντιγραφή κειμένου ≥ 4. 5:1 (κανονικό), ≥ 3:1 (μεγάλο).
Μη κωδικοποιήσετε την κατάσταση μόνο σε χρώμα: χρησιμοποιήστε το εικονίδιο/μοτίβο/υπογραφή.
Τα στυλ εστίασης και η πλοήγηση πληκτρολογίου είναι υποχρεωτικά.
Voey Over/TalkBack: ρόλοι, ετικέτες, taba queuing.

13) Αντι-μοτίβα

Απολύτως λευκό κείμενο σε εντελώς μαύρο φόντο σε μεγάλες περιοχές - «τρεμοπαίζοντας» και κόπωση.
Ο Νέον δίνει έμφαση στον σκοτεινό θόρυβο.
Σκιές υψηλής αντίθεσης (γκρι σε μαύρο με σκληρά σύνορα).
Διαφανές κείμενο στη φωτογραφία χωρίς μάσκα.
Εξαφανιζόμενος κάτοχος θέσης (α πολύ χαμηλή).

14) Παραδείγματα κατασκευαστικών στοιχείων

Πλήκτρο

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Κάρτα

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Σχέδιο δοκιμών

Φωτισμός: σκοτεινό δωμάτιο/φως ημέρας/βράδυ δρόμου.
Συσκευές: OLED και IPS, κινητά/επιτραπέζια, διαφορετικές πυκνότητες.
: έλεγχος αντίθεσης, πάσο πληκτρολογίου, αναγνωσιμότητα των κατόχων θέσεων.
Αντίληψη: ab-test «κόπωση των οφθαλμών» και σφάλματα εισόδου τη νύχτα.
Επιδόσεις: Μετρήσεις RUM (INP/CLS) μετά τη συμπερίληψη ενός σκοτεινού θέματος. Φορτίο GPU (θολό/σκιώδες φαινόμενο).

16) Μετρήσεις ποιότητας

Αντίθεση Violations/1k στοιχείων (στόχος: → 0).
Ποσοστό καταγγελίας για το «πολύ σκοτεινό/φωτεινό».
Ολοκλήρωση νυχτερινής συνεδρίας (μετρήσεις συμπεριφοράς ανά συνεδρία 22: 00-06: 00).
INP/CLS p75 σε σκοτεινή κατάσταση έναντι φωτός (όχι χειρότερη από τη βασική).
Opt-in Dark Mode και διατήρηση των χρηστών που επιλέγουν ένα θέμα.

17) Κατάλογος ελέγχου εκτόξευσης

• Σκοτεινή θεματική παλέτα με 4-5 επίπεδα επιφάνειας
• Η αντίθεση κειμένου/εικονιδίων/συνόρων αντιστοιχεί στην WCAG AA
• Ορατά στυλ εστίασης και καταστάσεις (αιώρηση/ενεργός/ανάπηρος)
• Λογότυπα/εικονίδια/φωτογραφίες προσαρμοσμένες, μάσκες στη φωτογραφία
• Γραφήματα - μεταλλαγμένα πλέγματα, αναγνώσιμες λεζάντες, μη δηλητηριώδεις σειρές
• Light/Dark/System switch, αποθήκευση επιλογής χωρίς «flash»
• Σεβασμός για το «σύστημα προτιμήσεων-χρωμάτων» και το «προτιμώμενο-μειωμένο-μοτίβο»
• RUM/perf-ταμπλό, προειδοποιήσεις παλινδρόμησης

18) Σχέδιο εφαρμογής (3 επαναλήψεις)

Επανάληψη 1 - Ίδρυμα (1- 2 εβδομάδες)

Παλέτα/μάρκες, βασικές επιφάνειες (βάση/elev1/elev2), κείμενο/σύνορα, κουμπιά/πεδία/πίνακες, διακόπτης θέματος.

Iteration 2 - Κοκκία (3- 4 εβδοµάδες)

Γραφήματα και εικονογραφήσεις στο σκοτάδι, μάσκες στη φωτογραφία, εστίαση/καταστάσεις, κινούμενα σχέδια λαμβάνοντας υπόψη μειωμένη κίνηση, perf-audit.

Iteration 3 - Βελτιστοποίηση (Συνεχής)

AMOLED mode as a option, financing contracts, usability tests at night, Light vs Dark RUM comparison, regular brand/UX auditions.

19) Mini-FAQ

Να φτιάξω ένα καθαρό μαύρο φόντο

Για τον UI, ένα βαθύ σκούρο γκρι είναι καλύτερο. αφήνουν καθαρό # 000 με την επιλογή «AMOLED mode».

Πρέπει να αυξήσω τον κορεσμό των προφορών

Στο σκοτάδι - συνήθως, αντιθέτως, ελαφρώς φωτεινός και μειώνει τον κορεσμό έτσι ώστε να μην «λάμπει».

Τι γίνεται με τις εικόνες πανό

Προσθήκη σκοτεινού φόντου/μάσκας, ελέγξτε την αντίθεση του κειμένου και του λογότυπου.

Σύνολο

Το σκοτεινό θέμα δεν είναι μια χρωματική αντιστροφή, αλλά μια ξεχωριστή μέθοδος σχεδιασμού: μια στοχαστική παλέτα, επίπεδα επιφάνειας, αναγνωσιμότητα, σωστές καταστάσεις, προσαρμοσμένα γραφικά και μέσα, και σεβασμός για τις ρυθμίσεις του συστήματος. Ακουμπήστε σε μάρκες, ρυθμίστε την αντίθεση και την απόδοση - και το Dark Mode είναι ένα βολικό, σταθερό και όμορφο εργαλείο για νυχτερινούς και καθημερινούς χρήστες.