Ομαλές μεταβάσεις λειτουργίας φωτός και σκοτεινής λειτουργίας: Tokens, CSS και Motion
Πώς να δημιουργήσετε έναν διακόπτη φωτεινού/σκούρου θέματος που σέβεται τη ρύθμιση του συστήματος, αποφεύγει το φλας κατά τη φόρτωση, διαμορφώνει στυλ εγγενών στοιχείων ελέγχου και κινούμενες εικόνες χωρίς να βλάπτει την προσβασιμότητα.
Core Takeaway
Δημιουργήστε θέματα σε σημασιολογικά διακριτικά, ακολουθήστε τη ρύθμιση συστήματος με προτιμήσεις-χρωματικό σχήμα από προεπιλογή, επιτρέψτε στους χρήστες να το παρακάμψουν και ορίστε την ιδιότητα σχήματος χρωμάτων, ώστε τα στοιχεία ελέγχου φόρμας και οι γραμμές κύλισης να ταιριάζουν. Εφαρμόστε το αποθηκευμένο θέμα πριν από την απόδοση της σελίδας για να αποφύγετε το φλας. Διατηρήστε την κινούμενη εικόνα του διακόπτη σύντομη, όπως μια γρήγορη διασταύρωση ή μια μετάβαση προβολής, και παραλείψτε την όταν είναι ενεργοποιημένη η μειωμένη κίνηση.
Ξεκινήστε από τη ρύθμιση συστήματος
Η δυνατότητα πολυμέσων προτιμώμενων χρωμάτων σάς ενημερώνει εάν ο χρήστης έχει ζητήσει από το λειτουργικό του σύστημα ένα ανοιχτό ή σκούρο θέμα. Χρησιμοποιήστε το ως προεπιλογή και προσθέστε έναν διακόπτη εντός εφαρμογής που το παρακάμπτει και απομνημονεύεται.
Θέμα με διακριτικά, όχι παρακάμψεις
Ορίστε τα χρώματα ως σημασιολογικά διακριτικά (επιφάνεια, κείμενο, περίγραμμα, έμφαση) και δώστε σε κάθε θέμα τις δικές του τιμές, συνήθως ως προσαρμοσμένες ιδιότητες CSS στο ριζικό στοιχείο. Στη συνέχεια, τα στοιχεία δεν αλλάζουν ποτέ μεταξύ των θεμάτων. μόνο οι συμβολικές τιμές κάνουν. Αυτή είναι η ίδια προσέγγιση διακριτικών τριών επιπέδων που χρησιμοποιείται για συστήματα σχεδίασης πολλαπλών σημάτων.
Μην ξεχνάτε τα εγγενή στοιχεία ελέγχου
Το MDN εξηγεί ότι η ιδιότητα χρωματικού σχήματος λέει στο πρόγραμμα περιήγησης ποια σχήματα υποστηρίζει ένα στοιχείο, το οποίο αλλάζει τα προεπιλεγμένα χρώματα των στοιχείων ελέγχου φόρμας, των γραμμών κύλισης και άλλων ενσωματωμένων διεπαφών. Χωρίς αυτό, μια σκοτεινή σελίδα μπορεί να εμφανίζει έντονες λευκές εισόδους και γραμμές κύλισης.
Αποφύγετε το φλας κατά τη φόρτωση
Εάν το αποθηκευμένο θέμα εφαρμοστεί από το JavaScript μετά την απόδοση της σελίδας, οι χρήστες βλέπουν ένα φλας με λάθος θέμα. Εφαρμόστε το όσο το δυνατόν νωρίτερα, με μια μικρή ενσωματωμένη δέσμη ενεργειών στην κεφαλή του εγγράφου ή ένα χαρακτηριστικό απόδοσης από τον διακομιστή, πριν ζωγραφίσει το φύλλο στυλ.
Κινητοποιήστε προσεκτικά τον διακόπτη
Ένα σύντομο cross-fade, περίπου 150 έως 250 χιλιοστά του δευτερολέπτου, κάνει την αλλαγή να φαίνεται σκόπιμη. Αποφύγετε τη μετάβαση κάθε ιδιότητας χρώματος σε κάθε στοιχείο, η οποία μπορεί να είναι αργή σε μεγάλες σελίδες. ένα στιγμιότυπο μετάβασης προβολής είναι συχνά πιο ομαλό. Κάντε την ίδια την εναλλαγή καθαρή, με μια ετικέτα ή επεξήγηση εργαλείου και αφαιρέστε την κινούμενη εικόνα όταν είναι ενεργοποιημένη η μειωμένη κίνηση.
Απόσπασμα υλοποίησης παραγωγής
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Κλειδί Principles για να θυμάστε
- Προεπιλογή για prefers-color-scheme. αφήστε τους ανθρώπους να παρακάμψουν και να το θυμούνται
- Θέμα με σημασιολογικά διακριτικά, όχι παρακάμψεις ανά στοιχείο
- Ρυθμίστε τον συνδυασμό χρωμάτων ώστε τα εγγενή στοιχεία ελέγχου να ταιριάζουν
- Εφαρμόστε το αποθηκευμένο θέμα πριν από την πρώτη βαφή
- Διατηρήστε το κινούμενο σχέδιο διακόπτη σύντομο και σεβαστείτε τη μειωμένη κίνηση
Συχνές Ερωτήσεις
Πηγές
- prefers-color-scheme — MDN Έγγραφα Ιστού
- color-scheme — MDN Έγγραφα Ιστού
- View Transition API — MDN Έγγραφα Ιστού