डार्क मोड के छह स्तर (2024)

 (cssence.com)
10 पॉइंट द्वारा GN⁺ 10 일 전 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • ब्राउज़र की बुनियादी सुविधाओं से लेकर JavaScript media queries तक, डार्क मोड इम्प्लीमेंटेशन के दायरे को धीरे-धीरे बढ़ाने वाले 8 स्तरों के विभाजन का सार
  • सबसे सरल तरीका <meta name="color-scheme" content="light dark"> या color-scheme: light dark घोषित करके यूज़र की color scheme preference का पालन करना है
  • ऊँचे स्तरों पर light-dark() फ़ंक्शन, @media (prefers-color-scheme: dark), और scheme-विशिष्ट अलग stylesheet के ज़रिए सिर्फ रंग ही नहीं बल्कि images और shadows तक का व्यापक समायोजन संभव है
  • सिर्फ यूज़र की system setting का पालन करने के बजाय Automatic·light·dark तीन विकल्प देने वाला switcher बनाया जा सकता है, और :has() तथा वास्तविक meta element के आधार पर theme पहचाना जा सकता है
  • Safari की accessibility सीमाएँ और print के समय prefers-color-scheme के व्यवहार के अवलोकन भी शामिल हैं, जिससे पता चलता है कि हाल की CSS सुविधाओं से light/dark mode को बिल्ट-इन बनाना काफी आसान हो गया है

डार्क मोड का स्तर-दर-स्तर इम्प्लीमेंटेशन

  • Level 1: Barebone

    • बिना एक भी CSS लाइन के light/dark भेद सक्रिय किया जा सकता है, और document head में <meta name="color-scheme" content="light dark"> जोड़ते ही ब्राउज़र यूज़र की color scheme preference का पालन करने लगता है
    • content attribute में आइटम्स का क्रम सैद्धांतिक रूप से मायने रखता है, और जिन यूज़र्स ने color scheme preference निर्धारित नहीं की है उन्हें space से अलग की गई सूची का पहला मान मिलता है
    • मौजूदा operating system settings में color scheme न चुनने का विकल्प नहीं है, इसलिए व्यवहार में अंततः वही scheme लागू होती है जो operating system setting से मेल खाती है
    • content में केवल एक मान भी दिया जा सकता है; इस स्थिति में यूज़र preference को ध्यान में रखे बिना वही scheme force की जाती है
    • यह meta tag कुछ हद तक अगले स्तर वाले CSS तरीके के HTML-पक्षीय समकक्ष की भूमिका निभाता है

  • Level 2: Basic

    • CSS में html { color-scheme: light dark; } घोषित करके light/dark mode भेद लागू किया जा सकता है
    • अगर DOM में पहले से meta tag मौजूद है तो यह declaration ज़रूरी नहीं है, और यदि आप HTML नियंत्रित कर सकते हैं तो meta tag का उपयोग सुझाया जाता है ताकि ब्राउज़र CSS parse होने से पहले ही निर्देश जान सके
    • दोनों तरीके user agent default styles और उनमें शामिल light/dark mode का लाभ लेने देते हैं
    • इसके ऊपर CSS जोड़ते समय अगर ज़ोर CSS system colors के उपयोग पर रखा जाए तो काफ़ी सुसंगत डिज़ाइन बनाया जा सकता है
    • जहाँ meta tag हमेशा पूरे document पर लागू होता है, वहीं CSS color-scheme declaration root element के अलावा दूसरी जगहों पर भी सेट की जा सकती है; इस अंतर से अतिरिक्त उपयोग की गुंजाइश बनती है

  • Level 3: Benign

    • अपेक्षाकृत हाल में जोड़ा गया CSS का light-dark() color function सरल light/dark mode समायोजन के लिए इस्तेमाल किया जा सकता है
    • उदाहरण में background-color: light-dark(black, white); और color: light-dark(white, black); की तरह उपयोग किया गया है; पहला argument light mode पर और दूसरा argument dark mode पर लागू होता है
    • arguments में सीधे वास्तविक colors दिए जा सकते हैं, या ऐसी custom properties जो color के रूप में व्याख्यायित हों
    • इस पूरे लेख में लिखे जाने के समय के अनुसार केवल इसी स्तर के लिए browser support पर्याप्त नहीं है

  • Level 4: Bold

    • पारंपरिक @media (prefers-color-scheme: dark) media query से डार्क मोड स्विचिंग लागू की जा सकती है
    • चाहे light क्वेरी करें या dark, केवल रंग बदलने तक सीमित न रहकर अधिकतम स्तर का customization संभव है
    • डार्क मोड में images को filter के ज़रिए कम संतृप्त करना, या box shadow को outline से बदलना जैसी adjustments भी संभव हैं

  • Level 5: Bisectional

    • media queries को HTML में भी इस्तेमाल किया जा सकता है, और link element के media attribute में रखकर scheme-विशिष्ट stylesheet अलग की जा सकती है
    • उदाहरण के तौर पर light.css और dark.css को क्रमशः prefers-color-scheme: light और prefers-color-scheme: dark से जोड़ने का तरीका दिया गया है
    • जब customization का दायरा बड़ा हो तो dedicated file संरचना उपयुक्त होती है, और ब्राउज़र क्वेरी से मेल न खाने वाली CSS files को अनदेखा कर सकता है, जिससे डाउनलोड की जाने वाली फ़ाइलें एक कम हो सकती हैं

  • Level 6: Ballistic

    • JavaScript में window.matchMedia('(prefers-color-scheme:dark)') के ज़रिए color scheme media query का उपयोग किया जा सकता है
    • अन्य media queries की तरह यह पूछा जा सकता है कि light या dark scheme लागू है या नहीं, और परिणाम के आधार पर इच्छित प्रोसेसिंग की जा सकती है
    • वास्तविक इम्प्लीमेंटेशन में पहले के स्तरों की तकनीकों में से केवल एक पर अड़े रहने के बजाय मिश्रित उपयोग किया जा सकता है

यूज़र switcher और उन्नत पैटर्न

  • Level 7: Beyond

    • केवल यूज़र की system preference पर निर्भर रहने की ज़रूरत नहीं है; color scheme switcher बनाया जा सकता है
    • यह switcher साधारण boolean नहीं होता, क्योंकि शुरुआती default के रूप में prefers-color-scheme का पालन करने वाला Automatic mode चाहिए
    • इसके ऊपर switcher जोड़ने पर यूज़र Automatic, light, dark इन तीन modes में से एक चुन सकता है

  • Level 8: Beguiling

    • Level 7 switcher को लागू करते समय आम तौर पर HTML element पर .dark class या data-theme="dark" जैसी attribute जोड़ने का तरीका इस्तेमाल होता है
    • इसके बजाय :has() का उपयोग करके वास्तविक <meta name="color-scheme" content="dark"> की मौजूदगी को सीधे query किया जा सकता है
    • उदाहरण में html:has(meta[name="color-scheme"][content="dark"]) selector के अंतर्गत --color-bg, --color-text जैसी CSS variables को डार्क मोड वाले मानों पर सेट किया गया है
    • अलग class या data attribute के बिना भी वास्तविक meta element के आधार पर theme पहचानी जा सकती है

अतिरिक्त चर्चा और अवलोकन

  • CSS Naked Day अवलोकन

    • styles हटाने के बाद देखी गई लगभग हर साइट पर डार्क मोड की अनुपस्थिति साफ़ दिखी, और इसी से डार्क मोड स्तरों का यह विभाजन बना
    • जब नई साइट शुरू से बनाई जाती है और नए styles लिखे जाते हैं, तो हाल की CSS सुविधाओं के साथ light/dark mode बिल्ट-इन करना बहुत आसान हो गया है

  • Safari accessibility issue

    • यह उल्लेख है कि अपेक्षाकृत हाल तक Safari डार्क मोड में accessible link colors उपलब्ध नहीं कराता था
    • पिछले CSS Naked Day में यह समस्या मिलने पर meta tag हटाकर केवल light color scheme इस्तेमाल करने का अनुभव भी बताया गया है
    • बाद में meta tag फिर जोड़ा गया, लेकिन यह समझ बनी रही कि पुराने Safari यूज़र्स के लिए accessibility में गिरावट हो सकती है
    • Safari के डार्क मोड में text boxes पर दिखाई देने वाली border की कमी भी देखी गई
    • केवल user agent styles पर निर्भर रहने से, सही semantic HTML का उपयोग करने पर भी पूरी accessibility सुनिश्चित नहीं होती; इसलिए आगे के CSS Naked Day में भी पर्याप्त styling बनाए रखने पर विचार किया गया है

  • Print और screen and शर्त

    • Bisectional उदाहरण में screen and ... उपयोग करने का कारण printer target को बाहर रखना बताया गया है
    • यह मानते हुए कि theme-independent core stylesheet या dedicated print stylesheet अलग मौजूद है, यह निर्णय सुरक्षित अलगाव के लिए लिया गया क्योंकि printer पर डार्क मोड अधिक ink खर्च कर सकता है
    • वास्तविक परीक्षण में system dark mode चालू रहते हुए print करने पर भी केवल काला text और सफ़ेद कागज़ ही निकला, और यह देखा गया कि ब्राउज़र print पर उन डार्क मोड styles को लागू नहीं करते
    • अतिरिक्त परीक्षण में print preview के दौरान prefers-color-scheme हमेशा light रिपोर्ट हुआ; यह Firefox और Chromium में देखा गया
    • अगर किसी के पास काले कागज़ और सफ़ेद स्याही वाला printer हो, तो यह अफ़सोस की बात होगी — ऐसा हल्का मज़ाक भी शामिल है

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.