Οι σχεδιαστές ιστοσελίδων προσθέτουν ολοένα και περισσότερο πολλαπλές λειτουργίες αντίθεσης στα έργα τους. Αυτό παρέχει στους χρήστες τη δυνατότητα να προβάλλουν έναν ιστότοπο στον προτιμώμενο χρωματικό συνδυασμό.
Στην πράξη, αυτό τείνει να έχει ως αποτέλεσμα την προσφορά τόσο σκοτεινής όσο και φωτεινής λειτουργίας. Αλλά δεν είναι μόνο για καλλυντικούς σκοπούς. Η αντίθεση παίζει τεράστιο ρόλο στην προσβασιμότητα. Για παράδειγμα, ορισμένοι χρήστες με προβλήματα όρασης θα βρίσκουν πιο ευανάγνωστο ένα σκούρο συνδυασμό χρωμάτων.
Οι σχεδιαστές λαμβάνουν επίσης υπόψη τις προτιμήσεις συστήματος ενός χρήστη. Ορισμένοι ιστότοποι θα εντοπίσουν τώρα εάν το λειτουργικό σύστημα ενός χρήστη έχει ρυθμιστεί να χρησιμοποιεί έναν σκούρο ή ανοιχτό συνδυασμό χρωμάτων – και στη συνέχεια θα εμφανίσουν τα κατάλληλα στυλ.
Ωστόσο, δεν είναι ποτέ καλή ιδέα δύναμη χρήστες σε μια συγκεκριμένη λειτουργία αντίθεσης. Γι’ αυτό είναι σημαντικό να παρέχετε έναν τρόπο εναλλαγής μεταξύ τους. Και αυτή η λειτουργικότητα είναι το επίκεντρό μας για σήμερα.
Ακολουθούν οκτώ μοναδικά αποσπάσματα κώδικα CSS και JavaScript για εναλλαγή μεταξύ σκοτεινής και φωτεινής λειτουργίας.
Ανοιχτό, σκοτεινό ή μαύρο θέμα από τον Håvard Brynjulfsen
Αυτός ο πίνακας ρυθμίσεων παρέχει τρεις διαφορετικές λειτουργίες χρώματος και είναι όμορφα σχεδιασμένος. Η μετάβαση μεταξύ των λειτουργιών είναι ομαλή, επιτρέποντας λιγότερο ενοχλητικές αλλαγές. Το μενού χρησιμοποιεί κουμπιά επιλογής HTML που έχουν διαμορφωθεί σε διακόπτη εναλλαγής. Είναι απλό, ελκυστικό και λειτουργικό.
Δείτε το στυλό Light / Dark / Black Theme από τον Håvard Brynjulfsen
Εύκολη σκοτεινή λειτουργία με SASS από τον Kaio Almeida
Ένα απλό πλαίσιο ελέγχου ενεργοποιεί αυτήν την εναλλαγή λειτουργίας αντίθεσης. Από εκεί, η JavaScript χρησιμοποιείται για την προσθήκη α data-theme χαρακτηριστικό στην ετικέτα HTML της σελίδας. Στη συνέχεια, το SASS αναζητά την τιμή του χαρακτηριστικού και διαμορφώνει ανάλογα το περιεχόμενο.
Δείτε το στυλό Εύκολη σκοτεινή λειτουργία με SASS από τον Kaio Almeida
Φωτεινή ή Σκοτεινή Λειτουργία από τον Álex
Γιατί να μην διασκεδάσετε με την ιδέα της εναλλαγής λειτουργιών αντίθεσης; Αυτό το απόσπασμα διαθέτει εικόνες SVG και κινούμενα σχέδια για να δημιουργήσετε μια μοναδική εναλλαγή ημέρας με νύχτα. Σημειώστε ότι ενώ μεταδίδει οπτικά το μήνυμα, μπορεί να επωφεληθεί από ορισμένες βελτιώσεις προσβασιμότητας προτού τεθεί σε περιβάλλον παραγωγής.
Δείτε το στυλό Light / Dark Mode από τον Álex
CSS Theme Switcher από τη Μισέλ Μπάρκερ
Πολλά αποσπάσματα σε αυτήν τη συλλογή χρησιμοποιούν JavaScript – αλλά το CSS είναι ικανό να χειριστεί την εργασία μόνη της. Αυτό το παράδειγμα όχι μόνο φαίνεται καλό, αλλά εφαρμόζει επίσης μια προσβάσιμη φόρμα HTML για την ενεργοποίηση του διακόπτη λειτουργίας. Όταν δημιουργείτε λειτουργίες που μπορούν να χρησιμοποιήσουν όλοι, είναι μια κατάσταση win-win.
Δείτε το στυλό CSS Theme Switcher από τη Μισέλ Μπάρκερ
Εναλλαγή σκοτεινής λειτουργίας GitHub από τον Chintu Yadav Sara
Ενώ αυτή η υπερμεγέθη εναλλαγή διατηρεί το λευκό φόντο της, αλλάζει τα εικονίδια μαζί με τη λειτουργία αντίθεσης της σελίδας. Επίσης, σημειώστε ότι τα διάφορα σχήματα φόντου μετατρέπονται σε φωτεινά χρώματα νέον ενώ βρίσκονται σε σκοτεινή λειτουργία. Αυτό προσθέτει διασκέδαση και περιεχόμενο στην παρουσίαση.
Δείτε το στυλό Εναλλαγή σκοτεινής λειτουργίας GitHub από τον Chintu Yadav Sara
Επίμονη σκοτεινή λειτουργία του Μπράιαν Χάφερκαμπ
Αν ψάχνετε για απλότητα, αυτό το κουμπί λειτουργίας χρώματος θα κάνει τη δουλειά. Χωρίς φανταχτερά εικονίδια (αν και σίγουρα μπορείτε να τα προσθέσετε) ή άγρια κινούμενα σχέδια. Ένα μόνο κλικ και μερικές ομαλές μεταβάσεις CSS. Επιπλέον, υπάρχει ένα εύχρηστο κομμάτι JavaScript που θα σώσει την προτίμηση του χρήστη στην τοπική αποθήκευση.
Δείτε το στυλό Επίμονη σκοτεινή λειτουργία του Μπράιαν Χάφερκαμπ
Βασική Vue Reactivity από το CodePen
Καθώς βλέπουμε περισσότερες διεπαφές που βασίζονται σε JavaScript αυτές τις μέρες, είναι σωστό να έχουμε ένα τέτοιο παράδειγμα. Εδώ, ένα στοιχείο Vue επιτρέπει στους χρήστες να αλλάζουν λειτουργίες αντίθεσης μέσω ενός απλού πλαισίου ελέγχου. Αυτό έχει πολλές δυνατότητες για ντύσιμο μέσω CSS.
Δείτε το στυλό Βασική Vue Reactivity από το CodePen
Σκοτεινή λειτουργία από την Airen
Για έργα που θα μπορούσαν να χρησιμοποιήσουν λίγο περισσότερη δημιουργικότητα, αυτή η εναλλαγή αιωρούμενης λάμπας θα πρέπει να παρέχει άφθονη έμπνευση. Για να διατηρείτε τα πράγματα προσβάσιμα, η εικόνα λαμπτήρα τοποθετείται μέσα σε ένα HTML button στοιχείο. Το animation παρέχεται μέσω CSS. Είναι ένας πολύ καλός τρόπος για να εμπλουτίσετε ένα χαρτοφυλάκιο ή ένα blog.
Δείτε το στυλό Σκοτεινή λειτουργία από την Airen
Ελάτε στη Σκοτεινή Λειτουργία (Ή Φως – Είναι η επιλογή σας)
Η προσθήκη τρόπων χρωματικής αντίθεσης στον ιστότοπό σας έχει νόημα σε πολλά σενάρια. Επιτρέπει στους σχεδιαστές να προσφέρουν στους χρήστες την επιλογή τους για την αισθητική, ενώ παράλληλα κάνει το περιεχόμενο πιο προσιτό.
Όπως δείχνουν τα παραπάνω αποσπάσματα, δεν υπάρχει έλλειψη τρόπων εφαρμογής αυτής της δυνατότητας. Το CSS επιτρέπει σχεδόν απεριόριστες επιλογές στυλ, ενώ η JavaScript μπορεί να παρέχει βασικές λειτουργίες όπου χρειάζεται.
Ελπίζουμε αυτή η συλλογή να χρησιμεύσει ως παράδειγμα του τι είναι δυνατό όταν πρόκειται για λειτουργίες αντίθεσης χρωμάτων. Και αν θέλετε να δείτε ακόμη περισσότερα αποσπάσματα, ρίξτε μια ματιά στο δικό μας Συλλογή CodePen!
