जटिल घटकों के लिए डार्क मोड
कार्ड, नेवबार, मोडल और फ़ॉर्म इनपुट पर डार्क रूपांतर लागू करके ऐसे परिष्कृत घटक बनाएँ जो दोनों थीम का समर्थन करें।
जटिल घटकों के लिए डार्क मोड, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
जटिल कंपोनेंट के लिए रणनीति
कार्ड, नेविगेशन बार, मोडल और फ़ॉर्म इनपुट जैसे जटिल UI कंपोनेंट में कई स्तरित एलिमेंट होते हैं — प्रत्येक का अपना बैकग्राउंड, टेक्स्ट, बॉर्डर और छाया होती है, जिन्हें डार्क मोड में बदलना आवश्यक है। मुख्य रणनीति है कि हर स्तर पर डार्क वैरिएंट को व्यवस्थित रूप से संभालें: सतह का रंग, कंटेंट का रंग, बॉर्डर और विभाजक का रंग, और इंटरैक्टिव स्थिति के रंग। किसी भी स्तर को छोड़ देने पर डार्क मोड का अनुभव असंगत हो जाता है।
डार्क मोड कार्ड कंपोनेंट
कार्ड में आमतौर पर एक बाहरी कंटेनर, वैकल्पिक इमेज, शीर्षक और विवरण वाला कंटेंट सेक्शन, तथा एक क्रिया फ़ूटर होता है। इनमें से प्रत्येक स्तर के लिए लाइट और डार्क दोनों वैरिएंट चाहिए। बाहरी कंटेनर सफ़ेद से गहरे ग्रे रंग में बदलता है। टेक्स्ट गहरे से हल्के रंग में बदलता है। बॉर्डर और विभाजक अधिक हल्के ग्रे रंग के हो जाते हैं, ताकि वे दिखाई देते रहें लेकिन बहुत तीखे न लगें।
<div class="bg-white dark:bg-gray-800 rounded-xl shadow dark:shadow-none dark:border dark:border-gray-700 overflow-hidden">
<img src="/image.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-gray-900 dark:text-white font-semibold text-lg">Card Title</h3>
<p class="text-gray-500 dark:text-gray-400 mt-1 text-sm">Card description goes here.</p>
<div class="border-t border-gray-100 dark:border-gray-700 mt-4 pt-4">
<button class="text-blue-600 dark:text-blue-400 font-medium text-sm hover:underline">Read more</button>
</div>
</div>
</div>डार्क मोड नेविगेशन बार
नेविगेशन बार के बैकग्राउंड, टेक्स्ट लिंक और इंटरैक्टिव एलिमेंट — सभी को अनुकूलित होना चाहिए। लाइट मोड में सफ़ेद नेविगेशन बार और ग्रे टेक्स्ट सामान्य है। डार्क मोड में dark:bg-gray-900 जैसे गहरे बैकग्राउंड और हल्के लिंक टेक्स्ट का उपयोग करें। गहरे बैकग्राउंड पर दृश्यता बनाए रखने के लिए सक्रिय लिंक का रंग आमतौर पर ब्रांड रंग के हल्के वैरिएंट में बदल जाता है।
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-4">
<div class="flex items-center justify-between">
<a href="/" class="text-gray-900 dark:text-white font-bold text-xl">MyApp</a>
<div class="flex gap-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm font-medium">Features</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm font-medium">Pricing</a>
</div>
</div>
</nav>डार्क मोड मोडल
मोडल में दो अलग-अलग सतहें होती हैं: पीछे की ओवरले और मोडल का कंटेंट पैनल। दोनों मोड में पीछे की ओवरले को गहरा होना चाहिए — आमतौर पर अर्ध-पारदर्शी काले रंग से। कंटेंट पैनल में कार्ड जैसी डार्क शैली अपनाएँ: गहरा ग्रे बैकग्राउंड, हल्का टेक्स्ट और हल्के बॉर्डर। बंद करने वाले बटन और क्रिया बटन पर भी उनके डार्क वैरिएंट लागू करने आवश्यक हैं।
<div class="fixed inset-0 bg-black/50 dark:bg-black/70 z-40 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-gray-900 p-6 w-full max-w-md mx-4">
<h2 class="text-gray-900 dark:text-white text-lg font-semibold">Modal Title</h2>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">Modal description content.</p>
<div class="flex gap-3 mt-6 justify-end">
<button class="px-4 py-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg">Cancel</button>
<button class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg">Confirm</button>
</div>
</div>
</div>डार्क मोड फ़ॉर्म इनपुट
डार्क मोड में फ़ॉर्म इनपुट पर विशेष ध्यान देना आवश्यक है, क्योंकि ब्राउज़र की डिफ़ॉल्ट ऑटोफ़िल और फ़ोकस शैलियाँ आपके गहरे बैकग्राउंड से मेल नहीं खा सकतीं। बैकग्राउंड और टेक्स्ट के रंग को स्पष्ट रूप से ओवरराइड करें और सुनिश्चित करें कि फ़ोकस रिंग दिखाई देती रहे। इनपुट के लिए गहरे ग्रे बैकग्राउंड, हल्के प्लेसहोल्डर टेक्स्ट और ऐसा चमकीला फ़ोकस रिंग रंग उपयोग करें, जो गहरी सतह पर स्पष्ट रूप से उभरकर दिखे।
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
<input
type="email"
class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600
text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500
rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
placeholder="you@example.com"
/>
</div>
</div>डार्क मोड साइडबार
दृश्य अलगाव बनाने के लिए साइडबार में अक्सर मुख्य कंटेंट क्षेत्र से थोड़ा अलग शेड उपयोग किया जाता है। डार्क मोड में आप साइडबार के लिए dark:bg-gray-900 और मुख्य कंटेंट के लिए dark:bg-gray-800 उपयोग कर सकते हैं। सक्रिय साइडबार लिंक के लिए हाइलाइट किया हुआ बैकग्राउंड चाहिए — आमतौर पर ब्रांड रंग का गहरा वैरिएंट या स्वयं साइडबार से थोड़ा हल्का ग्रे।
<aside class="w-64 h-screen bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-4">
<nav class="space-y-1">
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium">
Dashboard
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800">
Settings
</a>
</nav>
</aside>डार्क मोड अलर्ट और बैज कंपोनेंट
सूचनात्मक अलर्ट और स्थिति बैज अर्थ बताने के लिए रंगों का उपयोग करते हैं — सफलता के लिए हरा, त्रुटि के लिए लाल और चेतावनी के लिए पीला। डार्क मोड में बहुत अधिक संतृप्त बैकग्राउंड रंग अत्यधिक तीखे लगते हैं। हल्के, मद्धम डार्क वैरिएंट उपयोग करें: bg-green-100 के बजाय dark:bg-green-900/30 के साथ dark:text-green-300 उपयोग करें। इससे अर्थ-संबंधी रंग का मतलब बना रहता है और गहरी सतहों पर रूप भी सुघड़ दिखता है।
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
<p class="text-green-700 dark:text-green-300 text-sm font-medium">Success! Your changes have been saved.</p>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
Active
</span>डार्क मोड तालिका
तालिकाओं में दोनों मोड के लिए उपयुक्त वैकल्पिक पंक्ति रंग, डेटा पंक्तियों से अलग दिखने वाला हेडर बैकग्राउंड और हल्की बनी रहने वाली होवर स्थितियाँ आवश्यक हैं। हल्की ग्रे धारियों को गहरे ग्रे वैरिएंट से बदलें, बॉर्डर को बहुत सूक्ष्म रखें और सुनिश्चित करें कि सभी सेल का टेक्स्ट कंट्रास्ट संबंधी आवश्यकताओं को पूरा करे। आमतौर पर तालिका हेडर का बैकग्राउंड डेटा पंक्तियों से थोड़ा अधिक गहरा होता है।
<table class="w-full text-sm">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="px-4 py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Name</th>
<th class="px-4 py-3 text-left text-gray-500 dark:text-gray-400 font-medium">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
<td class="px-4 py-3 text-gray-900 dark:text-gray-100">Alice</td>
<td class="px-4 py-3 text-green-600 dark:text-green-400">Active</td>
</tr>
</tbody>
</table>डार्क मोड कोड ब्लॉक
कोड ब्लॉक और सिंटैक्स हाइलाइट किया हुआ कंटेंट अक्सर डार्क मोड में बेहतर दिखता है, क्योंकि गहरे बैकग्राउंड उस टर्मिनल शैली जैसे लगते हैं जिससे डेवलपर परिचित होते हैं। लाइट मोड में कोड के लिए बहुत हल्का ग्रे बैकग्राउंड उपयोग करें। डार्क मोड में सतह स्वाभाविक रूप से गहरी हो जाती है। आँखों पर ज़ोर कम करने के लिए फ़ॉन्ट का रंग हल्का ऑफ़-व्हाइट रखें, जैसे dark:text-gray-200, ताकि गहरे बैकग्राउंड पर शुद्ध सफ़ेद टेक्स्ट न हो।
<pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 overflow-x-auto">
<code class="text-gray-800 dark:text-gray-200 text-sm font-mono">
const greeting = 'Hello, Tailwind!';
</code>
</pre>रंग पैलेट के साथ डार्क मोड को व्यवस्थित करना
जैसे-जैसे आपके कंपोनेंट की संख्या बढ़ती है, हर एलिमेंट के लिए डार्क वैरिएंट को हाथ से चुनना कठिन और असंगत हो जाता है। बेहतर तरीका है कि अपने कॉन्फ़िगरेशन में एक अर्थ-संबंधी रंग पैलेट तय करें: surface, on-surface, border और muted को CSS वेरिएबल के रूप में परिभाषित करें, जिनके मान dark क्लास के अंतर्गत बदलते हों। फिर हर कंपोनेंट कच्चे रंग शेड के बजाय इन अर्थ-संबंधी टोकन का उपयोग करता है, जिससे आपका डार्क मोड डिज़ाइन के स्तर पर ही एकसमान रहता है।
/* In your CSS */
:root {
--surface: theme('colors.white');
--on-surface: theme('colors.gray.900');
--border: theme('colors.gray.200');
}
.dark {
--surface: theme('colors.gray.800');
--on-surface: theme('colors.gray.100');
--border: theme('colors.gray.700');
}
/* In HTML */
<div class="bg-[var(--surface)] text-[var(--on-surface)] border-[var(--border)] border rounded-lg p-4">जटिल कंपोनेंट के डार्क मोड का परीक्षण
ब्राउज़र DevTools में dark क्लास को टॉगल करके और हर स्तर का दृश्य निरीक्षण करके जटिल कंपोनेंट का डार्क मोड में परीक्षण करें। जाँचें: क्या सभी टेक्स्ट एलिमेंट पढ़ने योग्य हैं? क्या बॉर्डर दिखाई दे रहे हैं, लेकिन बहुत तीखे नहीं हैं? क्या इंटरैक्टिव स्थितियाँ (होवर, फ़ोकस, सक्रिय) काम कर रही हैं? क्या अर्थ-संबंधी रंग (सफलता का हरा, त्रुटि का लाल) अपना मतलब बनाए रखते हैं? महत्वपूर्ण कंपोनेंट के लिए स्क्रीनशॉट तुलना परीक्षणों से इसे स्वचालित करें।
त्वरित जाँच
जटिल Tailwind कंपोनेंट पर डार्क मोड लागू करने की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: जटिल कंपोनेंट के हर स्तर — सतह, टेक्स्ट, बॉर्डर और इंटरैक्टिव स्थितियों — पर डार्क वैरिएंट आवश्यक हैं, अलर्ट और बैज जैसी अर्थ-संबंधी रंग उपयोगिताएँ dark:bg-green-900/30 जैसे गहरे, मद्धम अपारदर्शिता वाले वैरिएंट के साथ सबसे अच्छी तरह काम करती हैं, और CSS वेरिएबल पर आधारित अर्थ-संबंधी पैलेट कई कंपोनेंट में डार्क मोड को एकसमान रखता है। आगे हम Tailwind की कॉन्फ़िगरेशन फ़ाइल को विस्तार से समझेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “जटिल घटकों के लिए डार्क मोड” पाठ निःशुल्क है?
हाँ—“जटिल घटकों के लिए डार्क मोड” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“जटिल घटकों के लिए डार्क मोड” में मैं क्या सीखूँगा?
कार्ड, नेवबार, मोडल और फ़ॉर्म इनपुट पर डार्क रूपांतर लागू करके ऐसे परिष्कृत घटक बनाएँ जो दोनों थीम का समर्थन करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“जटिल घटकों के लिए डार्क मोड” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- डार्क मोड रणनीतियाँ
- डार्क रूपांतर लागू करना
- डार्क मोड टॉगल बनाना
- जटिल घटकों के लिए डार्क मोड