Μετρητές που ακολουθούν το σκούρο θέμα

Ένας μετρητής είναι μια εικόνα στη σελίδα κάποιου άλλου. Όταν αυτή η σελίδα έχει σκούρο θέμα, η εικόνα δεν το γνωρίζει: σχεδιάστηκε στον διακομιστή, πολύ πριν η προτίμηση συστήματος του επισκέπτη υπάρξει ως γεγονός. Ένα λευκό σήμα σε σκούρα σελίδα είναι το συνηθισμένο αποτέλεσμα, και μοιάζει με τρύπα.

Δεκαπέντε από τα σχέδια εδώ το χειρίζονται παρ’ όλα αυτά. Όχι ρωτώντας τη σελίδα, και όχι με JavaScript — δεν εμπλέκεται καθόλου. Η εικόνα αλλάζει μόνη της.

Πώς

Το SVG δεν είναι εικόνα, είναι έγγραφο, και ένα έγγραφο μπορεί να περιέχει φύλλο στυλ. Έτσι ο διακομιστής αποδίδει το σχέδιο δύο φορές, ανοιχτό και σκούρο, βάζει και τα δύο σε ένα αρχείο και προσθέτει τρεις γραμμές CSS:

.s4uD{display:none} @media(prefers-color-scheme:dark){.s4uL{display:none}.s4uD{display:inline}}

Το πρόγραμμα περιήγησης εφαρμόζει αυτό το media query μέσα στην εικόνα, ακόμη και όταν η εικόνα φορτώνεται μέσω μιας απλής ετικέτας <img> από άλλον τομέα. Γυρίστε το σύστημα σε σκούρο θέμα και ο μετρητής ακολουθεί — χωρίς επαναφόρτωση, χωρίς να εμπλέκεται καθόλου η σελίδα γύρω του.

Τι κοστίζει

Και οι δύο εκδοχές βρίσκονται στο αρχείο, οπότε το αρχείο έχει περίπου διπλάσιο μέγεθος. Μετρημένο σε ένα σχέδιο: 1.029 byte κανονικά, 2.041 με το σκούρο δίδυμο. Αυτή είναι η τίμια τιμή και ο λόγος που δεν αποτελεί την προεπιλογή: ζητείται ανά ενσωμάτωση αντί να επιβάλλεται σε όλους.

Δεν υπάρχει δεύτερο αίτημα ούτε δεύτερος γύρος επικοινωνίας. Φτάνει ένα αρχείο, και το μισό που δεν χρειάζεται δεν ζωγραφίζεται ποτέ.

Η παγίδα στη μέση

Οι διαβαθμίσεις, τα φίλτρα και οι μάσκες στο SVG αναφέρονται μέσω id. Και οι δύο εκδοχές ενός σχεδίου παράγονται από τον ίδιο κώδικα, οπότε και οι δύο φέρνουν διαβαθμίσεις με ονόματα g1, g2, κ.ο.κ. Βάλτε και τις δύο σε ένα έγγραφο και ο δεύτερος ορισμός ενός id απλώς δεν ισχύει — η σκούρα εκδοχή αποδίδεται σιωπηλά με τα χρώματα της ανοιχτής.

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

Γι’ αυτό, πριν ενωθούν τα δύο μισά, κάθε id στη σκούρα εκδοχή μετονομάζεται με ένα πρόθεμα, και κάθε url(#...) που δείχνει σε κάποιο από αυτά ξαναγράφεται αναλόγως. Είναι ένα μικρό βήμα, και αν παραλειφθεί προκύπτει ένα σφάλμα που μια γρήγορη ματιά δεν μπορεί να εξηγήσει.

Πότε αρνείται

Αν λείπει κάποιο από τα δύο μισά, αν κάποιο δεν παράγει ένα <svg> στοιχείο ή αν τα δύο βγουν πανομοιότυπα byte προς byte — που σημαίνει ότι το σχέδιο δεν έχει σκούρα παραλλαγή — επιστρέφεται αμετάβλητη η ανοιχτή εκδοχή. Ένα μισοσυναρμολογημένο SVG θα ήταν χειρότερο από καθόλου σκούρο θέμα, και ένας μετρητής που σχεδιάζεται σωστά αξίζει περισσότερο από έναν μετρητή που είναι έξυπνος.