अपनी वेबसाइट या ऐप में डार्क मोड कैसे जोड़ें (बिना सफ़ेद फ़्लैश के)
डार्क मोड जोड़ने के लिए अपने रंगों को नामित टोकन के रूप में परिभाषित करें (बैकग्राउंड, टेक्स्ट, सतह, बॉर्डर, एक्सेंट), सीधे लिखे गए मान की जगह। हर टोकन का एक लाइट और एक डार्क मान दें, और CSS के prefers-color-scheme मीडिया फ़ीचर से दोनों के बीच बदलें, ताकि साइट विज़िटर की सिस्टम सेटिंग का पालन करे। अगर आपको मैन्युअल टॉगल भी चाहिए, तो चुनाव ब्राउज़र में स्टोर करें और उसे पेज के head में एक छोटी इनलाइन स्क्रिप्ट से लागू करें, ताकि लोड होते समय सफ़ेद फ़्लैश न दिखे। फिर दोनों थीम में कॉन्ट्रास्ट, इमेज और चार्ट जाँचें। AI ऐप बिल्डर में एक साफ़ प्रॉम्प्ट इसका ज़्यादातर काम कर सकता है; गुणवत्ता जाँच में आती है।
दो तरीके
| तरीका | यह कैसे काम करता है | किसके लिए अच्छा | ट्रेड-ऑफ़ |
|---|---|---|---|
| सिस्टम का पालन करें | CSS मीडिया फ़ीचर prefers-color-scheme लाइट या डार्क चुनता है | सरल साइटें, कोई UI नहीं | विज़िटर अपने डिवाइस से अलग नहीं चुन सकते |
| टॉगल + सिस्टम डिफ़ॉल्ट | सिस्टम सेटिंग से शुरू होता है; Light / Dark / System स्विच उसे बदलता है और याद रखा जाता है | ऐसी ऐप जिन्हें लोग बहुत इस्तेमाल करते हैं | थोड़ा JavaScript, और लोड पर फ़्लैश की समस्या हल करनी होती है |
ज़्यादातर ऐप के लिए दूसरा तरीका बेहतर रहता है: डिफ़ॉल्ट रूप से सिस्टम का सम्मान करें, और लोगों को उसे बदलने दें।
कलर टोकन से शुरू करें
डार्क मोड तब मुश्किल होता है जब रंग कोड में white, #333 और gray-100 की तरह बिखरे हों। यह आसान तब होता है जब हर रंग नामित टोकन के एक छोटे सेट से आए:
| टोकन | लाइट | डार्क |
|---|---|---|
background | लगभग सफ़ेद | बहुत गहरा भूरा |
surface (कार्ड, मेनू) | सफ़ेद | थोड़ा हल्का गहरा भूरा |
text | लगभग काला | ऑफ़-व्हाइट |
text-muted | मध्यम भूरा | हल्का मध्यम भूरा |
border | हल्का भूरा | गहरा भूरा, थोड़े कॉन्ट्रास्ट के साथ |
accent | आपका ब्रांड रंग | अक्सर हल्का या कम गाढ़ा संस्करण |
हर कॉम्पोनेंट टोकन के नाम इस्तेमाल करता है। तब थीम बदलने का मतलब है मानों का एक सेट बदलना, हर कॉम्पोनेंट को एडिट करना नहीं।
डार्क पैलेट के लिए सुझाव:
- बड़े हिस्सों के लिए पूरा काला और पूरा सफ़ेद न लें; बहुत गहरा भूरा और ऑफ़-व्हाइट पढ़ने में आसान होते हैं।
- गहराई हल्की सतहों से दिखाएँ, शैडो से नहीं; शैडो डार्क बैकग्राउंड पर मुश्किल से दिखती हैं।
- चमकीले ब्रांड रंगों की संतृप्ति थोड़ी कम करें; डार्क बैकग्राउंड पर वे असहज रूप से चमक सकते हैं।
- कॉन्ट्रास्ट पढ़ने लायक रखें। WCAG के AA स्तर पर सामान्य टेक्स्ट के लिए कम से कम 4.5:1 कॉन्ट्रास्ट चाहिए। धूसर मद्धम टेक्स्ट अक्सर डार्क थीम में यह मानक पूरा नहीं करता।
Tailwind CSS के साथ
कई AI से बनी ऐप में Tailwind डिफ़ॉल्ट स्टाइलिंग टूल है। Tailwind के डार्क मोड डॉक्स के अनुसार dark: वेरिएंट डिफ़ॉल्ट रूप से prefers-color-scheme इस्तेमाल करता है, इसलिए bg-white dark:bg-gray-900 जैसी क्लास बिना किसी अतिरिक्त काम के सिस्टम सेटिंग का पालन करती हैं।
Tailwind v4 में मैन्युअल टॉगल के लिए, डॉक्स दिखाते हैं कि वेरिएंट को एक पैरेंट एलिमेंट पर क्लास से जोड़ा जाए:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
फिर ऐप root एलिमेंट पर dark क्लास जोड़ती या हटाती है। डॉक्स head में एक इनलाइन स्क्रिप्ट का भी सुझाव देते हैं जो पेज पेंट होने से पहले सेव किया गया चुनाव (या सिस्टम सेटिंग) लागू करती है, और यही फ़्लैश से बचने का सही तरीका है।
सफ़ेद फ़्लैश से बचना
फ़्लैश इसलिए होता है क्योंकि पेज पहले लाइट मोड में पेंट होता है, फिर JavaScript लोड होता है, सेव किया गया चुनाव पढ़ता है और डार्क पर स्विच करता है। इसका हल:
- पेज के head में एक छोटी इनलाइन स्क्रिप्ट डालें जो सेव की गई थीम पढ़े और कुछ भी रेंडर होने से पहले root एलिमेंट पर क्लास सेट करे।
- हर थीम के लिए
color-schemeCSS प्रॉपर्टी सेट करें, ताकि ब्राउज़र के बनाए हिस्से (स्क्रॉलबार, फ़ॉर्म कंट्रोल) मेल खाएँ। - दोनों थीम में पेज के लिए साफ़ बैकग्राउंड रंग दें।
- अगर ऐप सर्वर-रेंडर होती है, तो पक्का करें कि सर्वर और ब्राउज़र शुरुआती थीम पर सहमत हों, वरना पेज दोबारा रेंडर होकर झिलमिला सकता है।
उदाहरण प्रॉम्प्ट
पूरा सेटअप:
डार्क मोड जोड़ो। पहले हार्ड-कोड किए गए रंगों की जगह थीम टोकन लगाओ (background, surface, text, muted text, border, accent), जिनके लाइट और डार्क मान हों। डिफ़ॉल्ट रूप से विज़िटर की सिस्टम सेटिंग लो। हेडर में Light, Dark और System विकल्पों वाला थीम स्विच जोड़ो, चुनाव localStorage में याद रखो, और उसे head में इनलाइन स्क्रिप्ट से लागू करो ताकि लोड पर सफ़ेद फ़्लैश न हो। हर थीम के लिए color-scheme सेट करो। मौजूदा लाइट डिज़ाइन बिल्कुल वैसा ही रहने दो।
बाकी बची चीज़ें ठीक करना:
डार्क मोड में हर पेज जाँचो और ठीक करो: कम कॉन्ट्रास्ट वाला टेक्स्ट (कम से कम 4.5:1 का लक्ष्य), हार्ड-कोड किए गए सफ़ेद बैकग्राउंड, गायब होते बॉर्डर, गहरे बैकग्राउंड पर गहरे टेक्स्ट वाले चार्ट, और गायब होते लोगो। लाइट थीम मत बदलो।
इमेज और चार्ट:
डार्क मोड में लोगो का हल्का संस्करण इस्तेमाल करो। चार्ट के एक्सिस, ग्रिडलाइन और लेबल थीम टोकन इस्तेमाल करें। डार्क मोड में स्क्रीनशॉट पर हल्का बॉर्डर दो ताकि वे बैकग्राउंड में न घुलें।
चरण-दर-चरण
- रंगों का ऑडिट करें। हार्ड-कोड किए गए रंग ढूँढें और उन्हें टोकन से बदलें। ज़्यादातर काम यही है।
- हर टोकन के लिए डार्क मान परिभाषित करें।
prefers-color-schemeसे सिस्टम का पालन करें (या Tailwind का डिफ़ॉल्टdark:)।- अगर चाहें तो टॉगल जोड़ें: Light, Dark, System। चुनाव ब्राउज़र में स्टोर करें; लॉग इन वाली ऐप में इसे यूज़र प्रोफ़ाइल में भी सेव कर सकते हैं।
- head की इनलाइन स्क्रिप्ट और
color-schemeसे फ़्लैश रोकें। - मुश्किल हिस्से जाँचें: लोगो, आइकन, सफ़ेद बैकग्राउंड वाली इमेज, चार्ट, कोड ब्लॉक, मैप, एम्बेड, ईमेल।
- दोनों थीम टेस्ट करें, डेस्कटॉप और फ़ोन पर, सिस्टम को लाइट और डार्क दोनों पर सेट करके, और हार्ड रिफ़्रेश के बाद।
आम गलतियाँ
- सब कुछ उलटना। रंग उलटने वाला फ़िल्टर फ़ोटो और ब्रांड रंगों को बिगाड़ देता है।
- हार्ड-कोड किए रंग छूट जाना। डार्क पेज पर एक सफ़ेद कार्ड तुरंत अलग दिखता है।
- कम कॉन्ट्रास्ट वाला धूसर टेक्स्ट। देखने में स्टाइलिश लगता है, पढ़ने में विफल रहता है।
- लोड पर सफ़ेद फ़्लैश। खासकर रात में फ़ोन पर ज़्यादा दिखता है।
- थर्ड-पार्टी एम्बेड भूल जाना। मैप, वीडियो और विजेट लाइट रह सकते हैं; जाँचें कि उनमें डार्क विकल्प है या नहीं।
- सिर्फ़ दो स्थिति वाला टॉगल। एक बार किसी ने उसे दबा दिया, तो वह सिस्टम का पालन करने पर वापस नहीं जा सकता।
- लाइट थीम तोड़ना। प्रॉम्प्ट में साफ़ लिखें कि लाइट डिज़ाइन वैसा ही रहे।
चेकलिस्ट
- सभी रंग थीम टोकन से आते हैं
- डिफ़ॉल्ट रूप से सिस्टम सेटिंग का पालन होता है
- Light, Dark और System वाला वैकल्पिक टॉगल है, जो याद रहता है
- लोड या रिफ़्रेश पर कोई सफ़ेद फ़्लैश नहीं
-
color-schemeसेट है, ताकि फ़ॉर्म कंट्रोल और स्क्रॉलबार मेल खाएँ - दोनों थीम में टेक्स्ट कॉन्ट्रास्ट कम से कम 4.5:1
- डार्क मोड में लोगो, इमेज, चार्ट और एम्बेड जाँचे गए
- लाइट थीम अपरिवर्तित
- डेस्कटॉप और फ़ोन पर टेस्ट किया गया
Mythex पर डार्क मोड
Mythex पर बनी ऐप डिफ़ॉल्ट रूप से Vite, React, TypeScript और Tailwind इस्तेमाल करती हैं, इसलिए ऊपर का Tailwind तरीका सीधे लागू होता है: पूरा सेटअप प्रॉम्प्ट चैट में चिपकाएँ, फिर दोनों थीम में और फ़ोन साइज़ पर प्रीव्यू जाँचें। Mythex की डिज़ाइन प्रॉम्प्टिंग सलाह है कि बदलने वाली और रखने वाली चीज़ों का नाम लिया जाए, और यहाँ यह मायने रखता है; लिखें कि लाइट थीम वैसी ही रहनी चाहिए। देखें डिज़ाइन और UI प्रॉम्प्ट, और अगर कोई पास गलत हो जाए तो चेकपॉइंट से वापस जाएँ।
लुक सही करने के बारे में और जानने के लिए, AI से अच्छी दिखने वाली ऐप कैसे डिज़ाइन करें और AI ऐप बिल्डर के लिए प्रॉम्प्ट कैसे लिखें पढ़ें।
सवाल
मेरी वेबसाइट को डिवाइस की डार्क मोड सेटिंग का पालन कैसे कराऊँ?
CSS prefers-color-scheme मीडिया फ़ीचर इस्तेमाल करें, जो बताता है कि विज़िटर का सिस्टम लाइट पर है या डार्क पर। Tailwind का dark: वेरिएंट डिफ़ॉल्ट रूप से इसी का इस्तेमाल करता है।
डार्क मोड पर जाने से पहले मेरी साइट सफ़ेद क्यों चमकती है?
सेव की गई थीम JavaScript द्वारा तब लगाई जाती है जब पेज पहले ही पेंट हो चुका होता है। इसे ठीक करने के लिए पेज के head में एक छोटी इनलाइन स्क्रिप्ट डालें जो कुछ भी रेंडर होने से पहले थीम क्लास सेट करे, और दोनों थीम के लिए साफ़ बैकग्राउंड रंग तय करें।
क्या डार्क मोड पूरा काला होना चाहिए?
आम तौर पर नहीं। बहुत गहरे भूरे रंग लंबे समय तक पढ़ने में आँखों पर आसान होते हैं, और थोड़ी हल्की सतहों से गहराई दिखा सकते हैं। पूरा काला OLED पर ज़ोर देने वाले या मीडिया-भारी डिज़ाइन पर अच्छा लगता है।
अगर मैं सिस्टम सेटिंग का पालन करता हूँ, तो क्या मुझे डार्क मोड टॉगल चाहिए?
सख़्ती से नहीं। सिस्टम का पालन करना एक अच्छा डिफ़ॉल्ट है, लेकिन Light, Dark और System विकल्पों वाला टॉगल उन लोगों के काम आता है जो चाहते हैं कि आपकी साइट उनके डिवाइस सेटिंग से अलग दिखे।