डार्क मोड के साथ बदलने वाले काउंटर

काउंटर किसी और के पेज पर लगी एक इमेज है। जब उस पेज में डार्क मोड होता है, तो इमेज को इसका पता नहीं होता: वह सर्वर पर बनी थी, उससे बहुत पहले कि विज़िटर के सिस्टम की पसंद एक तथ्य के रूप में मौजूद हो। आम नतीजा होता है गहरे रंग के पेज पर एक सफ़ेद बैज, और वह किसी छेद जैसा दिखता है।

यहाँ के पंद्रह डिज़ाइन फिर भी इसे संभाल लेते हैं। पेज से पूछकर नहीं, और JavaScript से भी नहीं — उसका इसमें कोई हाथ नहीं है। इमेज खुद ही बदल जाती है।

कैसे

SVG कोई तस्वीर नहीं, एक दस्तावेज़ है, और दस्तावेज़ अपने साथ एक स्टाइलशीट रख सकता है। इसलिए सर्वर डिज़ाइन को दो बार बनाता है, लाइट और डार्क, दोनों को एक फ़ाइल में रखता है, और CSS की तीन लाइनें जोड़ देता है:

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

ब्राउज़र यह मीडिया क्वेरी इमेज के अंदर भी लागू करता है, तब भी जब इमेज किसी दूसरे डोमेन से एक साधारण <img> टैग के ज़रिए लोड होती है। सिस्टम को डार्क पर करते ही काउंटर भी साथ बदल जाता है — बिना रीलोड के, और आसपास के पेज की किसी भी भागीदारी के बिना।

इसकी कीमत

दोनों वर्ज़न फ़ाइल में होते हैं, इसलिए फ़ाइल लगभग दोगुनी बड़ी होती है। एक डिज़ाइन पर मापा गया: आम तौर पर 1,029 बाइट, डार्क जुड़वाँ के साथ 2,041। यही ईमानदार कीमत है और यही वजह है कि यह डिफ़ॉल्ट नहीं है: इसे हर एम्बेड के लिए अलग से माँगा जाता है, सब पर थोपा नहीं जाता।

न कोई दूसरा अनुरोध होता है, न दूसरा राउंड ट्रिप। एक फ़ाइल आती है, और जिस आधे हिस्से की ज़रूरत नहीं, वह कभी रेंडर नहीं होता।

बीच का जाल

SVG में ग्रेडिएंट, फ़िल्टर और मास्क id से संदर्भित होते हैं। किसी डिज़ाइन के दोनों वर्ज़न एक ही कोड से बनते हैं, इसलिए दोनों में ऐसे ग्रेडिएंट होते हैं जिनके नाम हैं g1, g2, आदि। दोनों को एक दस्तावेज़ में रखने पर किसी id की दूसरी परिभाषा बस लागू नहीं होती — डार्क वर्ज़न चुपचाप लाइट वर्ज़न के रंगों में दिखता है।

कोई गड़बड़ी नहीं आती। फ़ाइल वैध है। बस वह ऐसे गलत दिखती है, जिसका दोष आसानी से जोड़ने की प्रक्रिया के बजाय डिज़ाइन पर डाला जा सकता है।

इसलिए दोनों हिस्सों को जोड़ने से पहले डार्क वर्ज़न की हर id का नाम एक उपसर्ग लगाकर बदला जाता है, और हर url(#...) जो किसी id की ओर इशारा करता है, उसी के अनुसार दोबारा लिखा जाता है। यह छोटा-सा कदम है, और इसे छोड़ने से ऐसा बग पैदा होता है जिसे सरसरी नज़र से समझा नहीं जा सकता।

जब यह मना कर देता है

अगर कोई एक हिस्सा गायब हो, अगर किसी से <svg> एलिमेंट न बने, या अगर दोनों बाइट-दर-बाइट एक जैसे निकलें — यानी डिज़ाइन का कोई डार्क रूप है ही नहीं — तो लाइट वर्ज़न बिना बदले लौटा दिया जाता है। आधा जुड़ा SVG डार्क मोड न होने से भी बुरा होता, और जो काउंटर दिखता है, वह उस काउंटर से ज़्यादा कीमती है जो चतुर है।