तुमच्या वेबसाइट किंवा ॲपमध्ये डार्क मोड कसा जोडायचा (फ्लॅश न होता)

डार्क मोड जोडण्यासाठी, तुमचे रंग हार्ड-कोडेड मूल्यांऐवजी नावाच्या टोकन्समध्ये (बॅकग्राउंड, मजकूर, पृष्ठभाग, बॉर्डर, अॅक्सेंट) परिभाषित करा, प्रत्येक टोकनला लाइट आणि डार्क मूल्य द्या, आणि CSS prefers-color-scheme मीडिया फीचरने त्यामध्ये स्विच करा, म्हणजे साइट अभ्यागताच्या सिस्टम सेटिंगचे अनुसरण करेल. मॅन्युअल टॉगलही हवा असेल, तर निवड ब्राउझरमध्ये साठवा आणि पेजच्या head मधील एका छोट्या इनलाइन स्क्रिप्टने ती लागू करा, म्हणजे लोड होताना पांढरा फ्लॅश होणार नाही. मग दोन्ही थीममध्ये कॉन्ट्रास्ट, प्रतिमा आणि चार्ट तपासा. AI ॲप बिल्डरमध्ये एक स्पष्ट प्रॉम्प्ट यातील बहुतेक काम करू शकतो; दर्जा तपासणीत येतो.

दोन पद्धती

बहुतेक ॲप्ससाठी दुसरी पद्धत चांगली आहे: डीफॉल्टने सिस्टमचा आदर करा, आणि लोकांना ती बदलू द्या.

रंग टोकन्सने सुरुवात करा

कोडमध्ये white, #333 आणि gray-100 असे रंग विखुरलेले असतील तर डार्क मोड त्रासदायक ठरतो. प्रत्येक रंग नावाच्या छोट्या टोकन्सच्या संचातून आला, तर ते सोपे होते:

प्रत्येक घटक टोकनची नावे वापरतो. थीम बदलणे म्हणजे मग प्रत्येक घटक संपादित करण्याऐवजी मूल्यांचा एक संच बदलणे.

डार्क पॅलेटसाठी टिप्स:

• मोठ्या भागांसाठी पूर्ण काळा आणि पूर्ण पांढरा टाळा; खूप गडद राखाडी आणि ऑफ-व्हाइट वाचायला सोपे असतात.
• हलक्या पृष्ठभागांनी खोली दाखवा, सावल्यांनी नव्हे — सावल्या गडद बॅकग्राउंडवर जवळजवळ दिसत नाहीत.
• तेजस्वी ब्रँड रंग थोडे कमी संतृप्त करा; गडद बॅकग्राउंडवर ते अस्वस्थपणे चमकू शकतात.
• कॉन्ट्रास्ट वाचनीय ठेवा. 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 *));

मग ॲप रूट घटकावर dark क्लास जोडते किंवा काढते. दस्तऐवज head मधील इनलाइन स्क्रिप्टचाही सल्ला देतात जी पेज रंगवण्यापूर्वी जतन केलेली निवड (किंवा सिस्टम सेटिंग) लागू करते — फ्लॅश टाळण्याचा नेमका हाच मार्ग आहे.

पांढरा फ्लॅश टाळणे

फ्लॅश होतो कारण पेज लाइट मोडमध्ये रंगते, मग JavaScript लोड होते, जतन केलेली निवड वाचते आणि डार्कवर स्विच होते. उपाय:

1. पेजच्या head मध्ये एक छोटी इनलाइन स्क्रिप्ट ठेवा जी जतन केलेली थीम वाचते आणि काहीही रेंडर होण्यापूर्वी रूट घटकावर क्लास सेट करते.
2. प्रत्येक थीमसाठी color-scheme CSS प्रॉपर्टी सेट करा, म्हणजे ब्राउझरने काढलेले भाग (स्क्रोलबार, फॉर्म कंट्रोल्स) जुळतील.
3. दोन्ही थीममध्ये पेजला स्पष्ट बॅकग्राउंड रंग द्या.
4. ॲप सर्व्हर-रेंडर होत असेल, तर सर्व्हर आणि ब्राउझर सुरुवातीच्या थीमबाबत सहमत असल्याची खात्री करा, नाहीतर पेज पुन्हा रेंडर होऊन चमकू शकते.

उदाहरण प्रॉम्प्ट्स

पूर्ण सेटअप:

डार्क मोड जोडा. प्रथम हार्ड-कोडेड रंग थीम टोकन्समध्ये बदला (background, surface, text, muted text, border, accent) लाइट आणि डार्क मूल्यांसह. डीफॉल्ट अभ्यागताच्या सिस्टम सेटिंगवर ठेवा. हेडरमध्ये Light, Dark आणि System पर्यायांसह थीम स्विच जोडा, निवड localStorage मध्ये लक्षात ठेवा, आणि ती head मधील इनलाइन स्क्रिप्टने लागू करा जेणेकरून लोड होताना पांढरा फ्लॅश होणार नाही. प्रत्येक थीमसाठी color-scheme सेट करा. सध्याची लाइट डिझाइन अगदी जशी आहे तशीच ठेवा.

उरलेले दुरुस्त करणे:

डार्क मोडमध्ये प्रत्येक पान तपासा आणि दुरुस्त करा: कमी कॉन्ट्रास्टचा मजकूर (किमान 4.5:1 चे ध्येय), हार्ड-कोडेड पांढरे बॅकग्राउंड, गायब होणाऱ्या बॉर्डर्स, गडद बॅकग्राउंडवर गडद मजकूर असलेले चार्ट, आणि गायब होणारे लोगो. लाइट थीम बदलू नका.

प्रतिमा आणि चार्ट:

डार्क मोडमध्ये लोगोची हलकी आवृत्ती वापरा. चार्टचे अक्ष, ग्रिडलाइन्स आणि लेबल्स थीम टोकन्स वापरतील असे करा. डार्क मोडमध्ये स्क्रीनशॉट्सना सौम्य बॉर्डर द्या, जेणेकरून ते बॅकग्राउंडमध्ये मिसळणार नाहीत.

टप्प्याटप्प्याने

1. रंगांचा ऑडिट करा. हार्ड-कोडेड रंग शोधा आणि टोकन्सने बदला. बहुतेक काम हेच आहे.
2. प्रत्येक टोकनसाठी डार्क मूल्ये परिभाषित करा.
3. prefers-color-scheme (किंवा Tailwind चा डीफॉल्ट dark:) ने सिस्टमचे अनुसरण करा.
4. हवा असल्यास टॉगल जोडा: Light, Dark, System. निवड ब्राउझरमध्ये साठवा; लॉग इन असलेल्या ॲप्ससाठी ती वापरकर्त्याच्या प्रोफाइलमध्येही साठवता येते.
5. इनलाइन head स्क्रिप्ट आणि color-scheme ने फ्लॅश रोखा.
6. अवघड भाग तपासा: लोगो, आयकॉन्स, पांढरे बॅकग्राउंड असलेल्या प्रतिमा, चार्ट, कोड ब्लॉक्स, नकाशे, एम्बेड्स, ईमेल.
7. डेस्कटॉप आणि फोनवर, सिस्टम लाइट आणि डार्कवर सेट असताना, आणि हार्ड रिफ्रेशनंतर दोन्ही थीमची चाचणी करा.

सामान्य चुका

• सर्व काही उलटवणे. रंग उलटवणारा फिल्टर फोटो आणि ब्रँड रंग बिघडवतो.
• हार्ड-कोडेड रंग मागे राहणे. डार्क पानावर एक पांढरा कार्ड लगेच उठून दिसतो.
• कमी कॉन्ट्रास्टचा राखाडी मजकूर. स्टायलिश दिसतो, पण वाचनीयता अयशस्वी.
• लोड होताना पांढरा फ्लॅश. विशेषतः रात्री फोनवर लक्षात येतो.
• तृतीय-पक्ष एम्बेड्स विसरणे. नकाशे, व्हिडिओ आणि विजेट्स हलके राहू शकतात; त्यांना डार्क पर्याय आहे का ते तपासा.
• फक्त दोन स्थिती असलेला टॉगल. एकदा कोणी क्लिक केले की ते सिस्टमचे अनुसरण करण्यावर परत जाऊ शकत नाहीत.
• लाइट थीम तुटवणे. तुमच्या प्रॉम्प्टमध्ये स्पष्ट सांगा की लाइट डिझाइन तसेच राहिले पाहिजे.

चेकलिस्ट

• सर्व रंग थीम टोकन्समधून येतात
• डीफॉल्टने सिस्टम सेटिंगचे अनुसरण
• Light, Dark आणि System असलेला पर्यायी टॉगल, लक्षात ठेवलेला
• लोड किंवा रिफ्रेशवर पांढरा फ्लॅश नाही
• फॉर्म कंट्रोल्स आणि स्क्रोलबार जुळावेत म्हणून color-scheme सेट
• दोन्ही थीममध्ये मजकूर कॉन्ट्रास्ट किमान 4.5:1
• डार्क मोडमध्ये लोगो, प्रतिमा, चार्ट आणि एम्बेड्स तपासलेले
• लाइट थीम बदललेली नाही
• डेस्कटॉप आणि फोनवर चाचणी झाली

Mythex सह डार्क मोड

Mythex वर बांधलेली ॲप्स डीफॉल्टने Vite, React, TypeScript आणि Tailwind वापरतात, त्यामुळे वरील Tailwind पद्धत थेट लागू होते: संपूर्ण सेटअप प्रॉम्प्ट चॅटमध्ये पेस्ट करा, मग दोन्ही थीममध्ये आणि फोन आकारात Preview तपासा. Mythex चा डिझाइन प्रॉम्प्टिंगचा सल्ला आहे की काय बदलायचे आणि काय ठेवायचे ते नाव द्या — इथे हे महत्त्वाचे आहे; लाइट थीम जशीच्या तशी राहिली पाहिजे असे सांगा. डिझाइन आणि UI प्रॉम्प्ट्स पहा, आणि एखादा पास चुकला तर चेकपॉइंटने मागे जा.

लूक योग्य मिळवण्याबाबत अधिक माहितीसाठी, AI ने चांगले दिसणारे ॲप कसे डिझाइन करायचे आणि AI ॲप बिल्डर्ससाठी प्रॉम्प्ट्स कसे लिहायचे पहा.

प्रश्न