Πώς να προσθέσετε σκοτεινό θέμα (dark mode) στον ιστότοπο ή την εφαρμογή σας (χωρίς το λευκό «φλας»)

Για να προσθέσετε dark mode, ορίστε τα χρώματά σας ως ονομασμένα tokens (φόντο, κείμενο, επιφάνεια, περίγραμμα, έμφαση) αντί για σταθερές τιμές, δώστε σε κάθε token μια φωτεινή και μια σκοτεινή τιμή, και εναλλάσσετέ τες με το χαρακτηριστικό CSS prefers-color-scheme ώστε ο ιστότοπος να ακολουθεί τη ρύθμιση του συστήματος του επισκέπτη. Αν θέλετε και χειροκίνητη εναλλαγή, αποθηκεύστε την επιλογή στον browser και εφαρμόστε την με ένα μικρό inline script στην κεφαλίδα της σελίδας, ώστε να μην υπάρχει λευκό φλας στη φόρτωση. Μετά ελέγξτε την αντίθεση, τις εικόνες και τα γραφήματα και στα δύο θέματα. Σε εργαλείο κατασκευής AI, ένα σαφές prompt κάνει το μεγαλύτερο μέρος της δουλειάς· ο έλεγχος είναι εκεί που φαίνεται η ποιότητα.

Δύο προσεγγίσεις

Οι περισσότερες εφαρμογές αποδίδουν καλύτερα με τη δεύτερη: σέβονται το σύστημα ως προεπιλογή και αφήνουν τους ανθρώπους να το αλλάξουν.

Ξεκινήστε με χρωματικά tokens

Το dark mode γίνεται επίπονο όταν τα χρώματα είναι σκορπισμένα στον κώδικα ως white, #333 και gray-100. Γίνεται εύκολο όταν κάθε χρώμα προέρχεται από ένα μικρό σύνολο ονομασμένων tokens:

Κάθε στοιχείο χρησιμοποιεί τα ονόματα των tokens. Η αλλαγή θέματος σημαίνει τότε την αλλαγή ενός συνόλου τιμών, όχι την επεξεργασία κάθε στοιχείου.

Συμβουλές για τη σκοτεινή παλέτα:

• Αποφύγετε το καθαρό μαύρο και το καθαρό λευκό σε μεγάλες επιφάνειες· πολύ σκούρο γκρι και off-white διαβάζονται ευκολότερα.
• Δείξτε βάθος με πιο ανοιχτές επιφάνειες, όχι με σκιές, γιατί οι σκιές σχεδόν δεν φαίνονται σε σκούρο φόντο.
• Μειώστε ελαφρά τον κορεσμό των έντονων χρωμάτων της μάρκας, γιατί μπορεί να λάμπουν δυσάρεστα σε σκούρο φόντο.
• Κρατήστε την αντίθεση αναγνώσιμη. Το επίπεδο AA των WCAG ζητά τουλάχιστον 4,5:1 για κανονικό κείμενο. Το γκρι κείμενο με έμφαση συχνά αποτυγχάνει σε σκοτεινά θέματα.

Με Tailwind CSS

Το Tailwind είναι το προεπιλεγμένο εργαλείο στυλ σε πολλές εφαρμογές που φτιάχνονται με AI. Σύμφωνα με την τεκμηρίωση dark mode του Tailwind, η παραλλαγή dark: χρησιμοποιεί prefers-color-scheme από προεπιλογή, οπότε κλάσεις όπως bg-white dark:bg-gray-900 ακολουθούν τη ρύθμιση του συστήματος χωρίς επιπλέον δουλειά.

Για χειροκίνητη εναλλαγή στο Tailwind v4, η τεκμηρίωση δείχνει τη μετατροπή της παραλλαγής σε κλάση σε στοιχείο γονέα:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Έπειτα η εφαρμογή προσθέτει ή αφαιρεί την κλάση dark στο στοιχείο ρίζας.

Αποφεύγοντας το λευκό φλας

Το φλας συμβαίνει επειδή η σελίδα σχεδιάζεται πρώτα σε φωτεινό θέμα, μετά φορτώνει η JavaScript, διαβάζει την αποθηκευμένη επιλογή και αλλάζει σε σκοτεινό. Η λύση:

1. Βάλτε ένα μικρό inline script στην κεφαλίδα της σελίδας που διαβάζει το αποθηκευμένο θέμα και ορίζει την κλάση στο στοιχείο ρίζας πριν αποδοθεί οτιδήποτε.
2. Ορίστε την ιδιότητα CSS color-scheme για κάθε θέμα, ώστε τα στοιχεία που σχεδιάζονται από τον browser (μπάρες κύλισης, στοιχεία φόρμας) να ταιριάζουν.
3. Δώστε στη σελίδα ρητό χρώμα φόντου και στα δύο θέματα.
4. Αν η εφαρμογή αποδίδεται από τον server, βεβαιωθείτε ότι ο server και ο browser συμφωνούν στο αρχικό θέμα, αλλιώς η σελίδα μπορεί να ξαναζωγραφιστεί και να τρεμοπαίξει.

Παραδείγματα prompts

Μια πλήρης ρύθμιση:

Πρόσθεσε dark mode. Πρώτα αντικατάστησε τα σταθερά χρώματα με χρωματικά tokens (φόντο, επιφάνεια, κείμενο, δευτερεύον κείμενο, περίγραμμα, έμφαση) με φωτεινές και σκοτεινές τιμές. Προεπιλογή η ρύθμιση του συστήματος του επισκέπτη. Πρόσθεσε διακόπτη θέματος στην κεφαλίδα με επιλογές Φωτεινό, Σκοτεινό και Σύστημα, θυμήσου την επιλογή στο localStorage και εφάρμοσέ την με inline script στην κεφαλίδα ώστε να μην υπάρχει λευκό φλας στη φόρτωση. Όρισε color-scheme για κάθε θέμα. Κράτησε ακριβώς ως έχει τον τρέχοντα φωτεινό σχεδιασμό.

Διόρθωση ό,τι έμεινε:

Έλεγξε κάθε σελίδα σε dark mode και διόρθωσε: κείμενο με χαμηλή αντίθεση (στόχος τουλάχιστον 4,5:1), σκληρά κωδικοποιημένα λευκά φόντα, περιγράμματα που χάνονται, γραφήματα με σκούρο κείμενο σε σκούρο φόντο και λογότυπα που εξαφανίζονται. Μην αλλάξεις το φωτεινό θέμα.

Εικόνες και γραφήματα:

Χρησιμοποίησε φωτεινή έκδοση του λογότυπου σε dark mode. Κάνε τους άξονες, τις γραμμές πλέγματος και τις ετικέτες των γραφημάτων να χρησιμοποιούν τα tokens του θέματος. Δώσε στα στιγμιότυπα οθόνης διακριτό περίγραμμα σε dark mode ώστε να μη χάνονται στο φόντο.

Βήμα προς βήμα

1. Ελέγξτε τα χρώματα. Βρείτε τα σταθερά χρώματα και αντικαταστήστε τα με tokens. Αυτό είναι το μεγαλύτερο μέρος της δουλειάς.
2. Ορίστε σκοτεινές τιμές για κάθε token.
3. Ακολουθήστε το σύστημα με prefers-color-scheme (ή την προεπιλεγμένη dark: του Tailwind).
4. Προσθέστε διακόπτη αν θέλετε: Φωτεινό, Σκοτεινό, Σύστημα. Αποθηκεύστε την επιλογή στον browser· για συνδεδεμένες εφαρμογές μπορείτε επίσης να την αποθηκεύσετε στο προφίλ του χρήστη.
5. Αποτρέψτε το φλας με το inline script στην κεφαλίδα και το color-scheme.
6. Ελέγξτε τα δύσκολα σημεία: λογότυπα, εικονίδια, εικόνες με λευκό φόντο, γραφήματα, μπλοκ κώδικα, χάρτες, ενσωματώσεις, emails.
7. Δοκιμάστε και τα δύο θέματα σε υπολογιστή και κινητό, με το σύστημα σε φωτεινό και σε σκοτεινό, και μετά από πλήρη ανανέωση.

Συχνά λάθη

• Αντιστροφή των πάντων. Ένα φίλτρο που αντιστρέφει χρώματα καταστρέφει φωτογραφίες και χρώματα μάρκας.
• Σκληρά κωδικοποιημένα χρώματα που μένουν. Μία λευκή κάρτα σε σκοτεινή σελίδα φαίνεται αμέσως.
• Γκρι κείμενο με χαμηλή αντίθεση. Φαίνεται κομψό, αλλά δυσκολεύει την ανάγνωση.
• Λευκό φλας στη φόρτωση. Ιδιαίτερα αισθητό στα κινητά τη νύχτα.
• Ξεχασμένες ενσωματώσεις τρίτων. Χάρτες, βίντεο και widgets μπορεί να μείνουν φωτεινά· ελέγξτε αν έχουν σκοτεινή επιλογή.
• Διακόπτης με δύο μόνο καταστάσεις. Μόλις κάποιος τον πατήσει, δεν μπορεί να επιστρέψει στην ακολούθηση του συστήματος.
• Χαλασμένο φωτεινό θέμα. Γράψτε ρητά στο prompt ότι ο φωτεινός σχεδιασμός πρέπει να μείνει ίδιος.

Λίστα ελέγχου

• Όλα τα χρώματα προέρχονται από tokens θέματος
• Ακολουθεί τη ρύθμιση του συστήματος από προεπιλογή
• Προαιρετικός διακόπτης Φωτεινό, Σκοτεινό και Σύστημα, με αποθήκευση της επιλογής
• Χωρίς λευκό φλας στη φόρτωση ή στην ανανέωση
• Ορισμένο color-scheme ώστε τα στοιχεία φόρμας και οι μπάρες κύλισης να ταιριάζουν
• Αντίθεση κειμένου τουλάχιστον 4,5:1 και στα δύο θέματα
• Λογότυπα, εικόνες, γραφήματα και ενσωματώσεις ελεγμένα σε dark mode
• Φωτεινό θέμα αμετάβλητο
• Δοκιμή σε υπολογιστή και κινητό

Dark mode με το Mythex

Οι εφαρμογές στο Mythex χρησιμοποιούν Vite, React, TypeScript και Tailwind από προεπιλογή, οπότε η προσέγγιση με Tailwind που περιγράφεται παραπάνω ισχύει άμεσα: επικολλήστε το prompt της πλήρους ρύθμισης στη συνομιλία, και μετά ελέγξτε την Προεπισκόπηση και στα δύο θέματα και σε μέγεθος κινητού. Η συμβουλή του Mythex για prompts σχεδιασμού είναι να ονομάζετε τι αλλάζει και τι μένει ως έχει, κάτι που εδώ έχει σημασία: γράψτε ότι το φωτεινό θέμα πρέπει να μείνει ως έχει. Δείτε Prompts σχεδιασμού και UI, και επαναφέρετε με checkpoint αν ένα πέρασμα πάει στραβά.

Για περισσότερα στο πώς να πετύχετε την εμφάνιση, δείτε πώς να σχεδιάσετε μια καλαίσθητη εφαρμογή με AI και πώς να γράφετε prompts για εργαλεία κατασκευής εφαρμογών AI.

Ερωτήσεις