Εναλλαγή θέματος διεπαφής

1) Αρχές

1. Σύστημα> δέρμα. Το θέμα δεν είναι μόνο μια αντιστροφή φόντου, αλλά ένα σύνολο από μάρκες (χρώμα, φόντο, αντίθεση, σκιές, καταστάσεις, εικονογραφήσεις, γραφήματα).
2. Πρώτο σύστημα. Εξ ορισμού - Σύστημα ('prefers-color-scheme') με δυνατότητα χειροκίνητης επιλογής φωτός/σκοτεινού/υψηλής αντίθεσης.
3. Προκαθορισμένη αντίθεση. Στόχος - WCAG AA, για μικρά κείμενα/σημαντικές ετικέτες - AAA.
4. Δεν εκδηλώθηκαν εστίες. Εφαρμόζουμε το θέμα πριν την απόδοση (inline script) και κάνουμε τις μεταβάσεις προσεκτικά.
5. Σταθερότητα σήματος. Οι προφορές και η σημασιολογία των καταστάσεων διατηρούνται σε όλα τα θέματα.

2) Τρόποι και σενάρια

Φως - ημερήσια σενάρια/έντυπα πληρωμής/μακρά ανάγνωση.
Σκούρο - βραδινό/χαμηλό φως/ζωντανά σπίρτα. μειώνει τη λάμψη.
Σύστημα - ακολουθήστε το OS/φυλλομετρητή ('prefers-color-scheme').
Υψηλή αντίθεση - αυξημένη αντίθεση και ελαχιστοποίηση κοσμημάτων (συμπεριλαμβανομένης της μείωσης της κίνησης).
Εποχιακό/Promo (προαιρετικό) - πάνω από το βασικό θέμα για το τουρνουά/εκδήλωση (δεν σπάει μάρκες).

3) Συμβολική αρχιτεκτονική

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

Κανόνας: Τα συστατικά χρησιμοποιούν μόνο σημασιολογικές μάρκες.

4) Ανιχνευτής και αποθήκευση επιλογής

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5) Ομαλή μετάβαση χωρίς FOUC

Εφαρμογή του θέματος πριν από τη φόρτωση του CSS (inline script).

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

Μετά την τοποθέτηση της εφαρμογής, προσθέστε 'class =' theme-ready ''.

6) Συνιστώσες και καταστάσεις

Κείμενο/εικονίδια: αντίθεση ≥ AA; δευτερεύον κείμενο όχι μικρότερο από 4. 5:1 (εύκολα «ξεθωριάζει» στο σκοτάδι).
Πεδία/κάρτες: φόντο '--bg-elev', σύνορα '-border', σκιώδες '--shadow'.
CTA: background '- accent', contrast text ('# fff' ή υπολογίζεται).
Κράτη (hover/focus/active/disable): Αλλαγή της φωτεινότητας/άλφα, όχι «λάμψη του ουράνιου τόξου».
Γραφικά/sparklines: ξεχωριστές παλέτες για φως/σκούρο. το πλέγμα/οι άξονες είναι χαμηλής αντίθεσης, αλλά ευανάγνωστοι.

7) Εικόνες/μέσα/λογότυποι

Μονόχρωμα εικονίδια - μέσω 'currentColor' (προσαρμογή στο κείμενο).
Μη αναστρέψετε τα λογότυπα της μάρκας; Ετοιμάστε δύο εκδόσεις (φως/σκοτάδι).
Αφίσες/στιγμιότυπα οθόνης: εύκολη επικάλυψη στο σκοτάδι (8-12%) για αναγνωσιμότητα κειμένων.
SVG: αποφύγετε τη «σκληρή» γέμιση, χρησιμοποιήστε var 'var (-fg) '/' var (-- προφορά)'.

8) Οικονομική προσιτότητα

Υψηλή αντίθεση: ξεχωριστό προκαθορισμένο 'θέμα δεδομένων = "h '.
Δακτύλιοι εστίασης: πάντα ορατοί ('περίγραμμα: 2px στερεά var (--focus), περίγραμμα-όφσετ: 2px ').
Μην βασίζεσαι στο χρώμα. Εικονίδιο/κείμενο/μοτίβο για καταστάσεις.
Γραμματοσειρές: 'nont-variant-numeric: tabular-nums?' για τα ποσά/συντελεστές.
RTL: το θέμα δεν σπάει τον καθρέφτη (χρησιμοποιούμε λογικές ιδιότητες).

9) Επιδόσεις

Χρώματα - Προσαρμοσμένες ιδιότητες CSS στη ρίζα - άμεση επαναχρησιμοποίηση χωρίς μετονομασία συστατικού.
Μην ξαναβάψετε εικόνες με φίλτρα 'αντιστροφής ()' σε μεγάλους περιέκτες.
Τεμπέλης αντικατάσταση βαρέων εικονογραφήσεων για το θέμα (εάν είναι απαραίτητο).
Μην αποθηκεύετε μεγάλες παλέτες στην JS - το θέμα ελέγχεται από την κλάση/ιδιότητα.

10) Οι ιδιαιτερότητες του iGaming

Ζωντανοί παράγοντες τη νύχτα: «μαλακή» αντίθεση (AAA για αριθμούς), τονίζοντας την αλλαγή του παράγοντα είναι ανυπεράσπιστη, χωρίς να τρεμοπαίζει.
Υπεύθυνο έργο: Οι υπενθυμίσεις και τα κίνητρα είναι αναγνώσιμα και στα δύο θέματα. χωρίς «δηλητηριώδη» λουλούδια τη νύχτα.
Box office: πεδία/υπογραφές/σφάλματα χωρίς κουραστικές λαμπερές προφορές. η επιτυχία/σφάλμα είναι σταθερή στο θέμα.
Τουρνουά «δέρματα»: μόνο ως επιφανειακή προφορά-παράκαμψη, δεν σπάνε βασικές μάρκες.

11) Snippets UI

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12) Μετρήσεις

Ποσοστό υιοθέτησης θέματος: μερίδιο των χρηστών στο Dark/System/HC.
Ρυθμός FOUC: αναλογία με ορατή «λευκή διάρρηξη» στην αρχή (<1%).
Ελαττώματα αντίθεσης: ο αριθμός των σφαλμάτων αντίθεσης με απελευθέρωση.
Προβολή σφαλμάτων: κλικ/επαναλήψεις λόγω «αόρατων» σφαλμάτων σε διάφορα θέματα.
Ενεργειακή επίπτωση (κινητή): σύγκριση του χρόνου συνεδρίας στο σκοτάδι προς το δόντι (έμμεση μέτρηση).

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

Αντιστροφή όλων των 'φίλτρων: αντιστροφή (1)' - σπάει το σήμα και τις έννοιες.
Αλλαγή χρωμάτων απευθείας σε συστατικά χωρίς μάρκες.
Απόκρυψη δακτυλίων εστίασης σε ένα σκοτεινό θέμα.
Το κείμενο είναι πολύ σκοτεινό σε σκοτεινό φόντο (ή φως σε ελαφρύ φόντο).
Μακρά μετάβαση σε ολόκληρη τη σελίδα (επιβράδυνση).
Χρώματα «αποκλειστικής» κατάστασης σε ένα θέμα που δεν είναι σε άλλο.

14) Κατάλογος ελέγχου QA

Σκέψεις και αναγνωσιμότητα

• Όλα τα κείμενα των ΣΣ· κρίσιμες ετικέτες/μικρό κείμενο ≥ AAA.
• Τα σφάλματα/επιτυχία/προειδοποιήσεις δεν είναι μόνο ευδιάκριτα σε χρώμα.

Συμπεριφορά

• Το σύστημα σέβεται 'προτιμά-χρωματικό σχήμα' και ανταποκρίνεται στις αλλαγές OS.
• Δεν υπάρχει FOUC (το θέμα ισχύει πριν από την απόδοση).
• Η αλλαγή του θέματος δεν επαναφέρει την κατάσταση της σελίδας.

Συστατικά

• Τα φύλλα/έντυπα/πίνακες χρησιμοποιούν μόνο μάρκες.
• Τα γραφικά έχουν παλέτες και για τα δύο θέματα.
• Τα λογότυπα/εικονίδια είναι σωστά ορατά και στα δύο θέματα.

A11y

• Ορατός δακτύλιος εστίασης. Η λειτουργία υψηλής αντίθεσης είναι διαθέσιμη.
• Σκεφτείτε 'prefers-μειωμένη κίνηση'.

Απόδοση

• Μετάβαση ≤ 200 ms. χωρίς παγκόσμιες επαναλήψεις.
• Δεν υπάρχουν βαρέα φίλτρα/μείγματα σε δοχεία.

15) Τεκμηρίωση στο σύστημα σχεδιασμού

Μάρκες θέματος: παλέτες, αντιθέσεις, κατάσταση (hover/focus/active/disabled).
Οδηγοί: Πώς να προσθέσετε μια νέα προφορά brendo χωρίς οπισθοδρόμηση.
Διαγράμματα/Μέσα: προκαθορισμένες παλέτες για φως/σκοτάδι.
Μοτίβα: System-first, High-Contrast, ομαλή αλλαγή χωρίς FOUC.
Do/Don: αντιστροφή φίλτρου, inline χρώματα, αόρατα σφάλματα/εστίαση.

Σύντομη Περίληψη

Ο διακόπτης θέματος εργασίας είναι σημασιολογικές μάρκες + System-first + flickering start. Σύλληψη αντίθεσης, συγκέντρωση χρωμάτων, σεβασμός 'προτιμά-χρώμα-σχήμα' και μείωση-κίνηση, αποθήκευση επιλογής χρήστη και αποφυγή βαρέων εφέ. Στη συνέχεια, το UI παραμένει ευανάγνωστο και αναγνωρίσιμο σε οποιαδήποτε ρύθμιση - από ένα νυχτερινό ζωντανό αγώνα μέχρι ένα ημερήσιο box office και οθόνες τουρνουά.