ट्यूटोरियल

डार्क मोड को लागू करना: एक संपूर्ण डेवलपर गाइड

7 मिनट पठन

डार्क मोड अब एक विशेष प्राथमिकता नहीं रही — यह एक अपेक्षित सुविधा बन चुकी है। macOS, Windows, Android, iOS — हर प्लेटफ़ॉर्म पर उपयोगकर्ता पूरे सिस्टम में डार्क दिखावट सेट कर सकते हैं, और वे चाहते हैं कि वेबसाइट्स और ऐप्स भी इसका पालन करें। डार्क मोड को सही तरीके से लागू करने के लिए केवल सफेद को काले से बदलने से अधिक की जरूरत होती है: इसके लिए रंग, कंट्रास्ट और उपयोगकर्ता नियंत्रण के प्रति एक व्यवस्थित दृष्टिकोण आवश्यक है। यह गाइड CSS आर्किटेक्चर से लेकर JavaScript टॉगल मैकेनिक्स तक, और दोनों थीम की गहन जांच तक की पूरी प्रक्रिया को समझाती है।

थीम के लिए CSS कस्टम प्रॉपर्टीज़

CSS में डार्क मोड को संभालने का सबसे रखरखाव योग्य तरीका कस्टम प्रॉपर्टीज़ (CSS वेरिएबल्स भी कहलाती हैं) के माध्यम से है। स्टाइलशीट में रंग मानों को बिखेरने की बजाय, आप :root पर हर रंग को एक वेरिएबल के रूप में परिभाषित करते हैं और फिर डार्क मोड के लिए उन वेरिएबल्स को फिर से परिभाषित करते हैं। कंपोनेंट स्टाइल केवल वेरिएबल्स को संदर्भित करती हैं — कभी भी सीधे hex कोड नहीं।

अपना लाइट और डार्क पैलेट परिभाषित करना

डिफ़ॉल्ट के रूप में लाइट-मोड पैलेट से शुरू करें। एक साफ शुरुआती बिंदु इस तरह दिख सकता है:

:root {
  /* बैकग्राउंड */
  --color-bg-base:      #FFFFFF;
  --color-bg-elevated:  #F8F9FA;
  --color-bg-overlay:   #F1F3F5;

  /* टेक्स्ट */
  --color-text-primary:   #1A1A2E;
  --color-text-secondary: #4A4A6A;
  --color-text-muted:     #6C757D;

  /* बॉर्डर */
  --color-border:         #DEE2E6;
  --color-border-strong:  #ADB5BD;

  /* ब्रांड / एक्सेंट */
  --color-accent:         #3B82F6;
  --color-accent-hover:   #2563EB;

  /* फीडबैक */
  --color-success:  #22C55E;
  --color-warning:  #F59E0B;
  --color-danger:   #EF4444;
}

फिर डार्क मोड के लिए एक अलग ब्लॉक में ओवरराइड परिभाषित करें। महत्वपूर्ण बात यह है कि आप केवल रंगों को पलट नहीं रहे — आप एक डार्क सतह के लिए एक अलग, उद्देश्य-निर्मित पैलेट चुन रहे हैं:

[data-theme="dark"] {
  /* बैकग्राउंड */
  --color-bg-base:      #0F0F17;
  --color-bg-elevated:  #1A1A2E;
  --color-bg-overlay:   #252540;

  /* टेक्स्ट */
  --color-text-primary:   #E8E8F0;
  --color-text-secondary: #A8A8C0;
  --color-text-muted:     #6A6A88;

  /* बॉर्डर */
  --color-border:         #2E2E4A;
  --color-border-strong:  #4A4A6A;

  /* ब्रांड / एक्सेंट — डार्क बैकग्राउंड पर पठनीयता के लिए अक्सर थोड़ा हल्का */
  --color-accent:         #60A5FA;
  --color-accent-hover:   #93C5FD;

  /* फीडबैक — कठोरता से बचने के लिए थोड़ा कम संतृप्त */
  --color-success:  #4ADE80;
  --color-warning:  #FCD34D;
  --color-danger:   #F87171;
}

ध्यान दें कि लाइट मोड में एक्सेंट #3B82F6 डार्क मोड में #60A5FA बन जाता है। वर्ण समान है लेकिन हल्कापन बढ़ जाता है — यह जरूरी है क्योंकि कंट्रास्ट का संदर्भ पलट गया है। सफेद बैकग्राउंड के विरुद्ध WCAG AA पास करने वाला रंग लगभग हमेशा गहरे-काले बैकग्राउंड के विरुद्ध विफल होगा जब तक आप इसे समायोजित नहीं करते। शेड जनरेटर किसी भी रंग की पूरी 50–950 रेंज को एक्सप्लोर करने देता है, जिससे प्रत्येक थीम के लिए उचित शेड चुनना आसान हो जाता है।

कंपोनेंट्स में वेरिएबल्स का उपयोग

पैलेट स्थापित होने के बाद, हर कंपोनेंट सीधे मानों की बजाय वेरिएबल्स को संदर्भित करता है:

.card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
}

जब <html> एलिमेंट पर [data-theme="dark"] एट्रिब्यूट मौजूद होता है, तो सभी वेरिएबल्स एक साथ अपडेट हो जाते हैं, और उन्हें संदर्भित करने वाला हर कंपोनेंट अपना रूप बदल लेता है — बिना किसी अतिरिक्त CSS के।

prefers-color-scheme मीडिया क्वेरी

उपयोगकर्ता के किसी टॉगल से इंटरैक्ट करने से पहले, आप prefers-color-scheme मीडिया क्वेरी का उपयोग करके उनकी ऑपरेटिंग सिस्टम प्राथमिकता का सम्मान कर सकते हैं। यह मीडिया क्वेरी तब फायर होती है जब OS डार्क दिखावट पर सेट हो।

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base:      #0F0F17;
    --color-bg-elevated:  #1A1A2E;
    --color-bg-overlay:   #252540;
    --color-text-primary:   #E8E8F0;
    --color-text-secondary: #A8A8C0;
    --color-text-muted:     #6A6A88;
    --color-border:         #2E2E4A;
    --color-border-strong:  #4A4A6A;
    --color-accent:         #60A5FA;
    --color-accent-hover:   #93C5FD;
    --color-success:  #4ADE80;
    --color-warning:  #FCD34D;
    --color-danger:   #F87171;
  }
}

यह तरीका बिना किसी JavaScript के काम करता है, लेआउट शिफ्ट शून्य होता है, और पेज लोड होते ही उपयोगकर्ता की घोषित प्राथमिकता का सम्मान होता है। यह सही आधार रेखा है। सीमा यह है कि उपयोगकर्ता आपके ऐप में इसे ओवरराइड नहीं कर सकते — यदि OS डार्क है, तो साइट डार्क है, बिना किसी विकल्प के। इसीलिए अधिकांश प्रोडक्शन इम्प्लीमेंटेशन मीडिया क्वेरी के ऊपर JavaScript टॉगल की परत जोड़ते हैं।

दोनों दृष्टिकोणों को मिलाना

अनुशंसित पैटर्न मीडिया क्वेरी को डिफ़ॉल्ट के रूप में और data-theme एट्रिब्यूट को स्पष्ट ओवरराइड के रूप में उपयोग करता है:

/* 1. लाइट मोड डिफ़ॉल्ट */
:root {
  --color-bg-base: #FFFFFF;
  /* ... */
}

/* 2. OS डार्क मोड ओवरराइड (जब कोई स्पष्ट प्राथमिकता नहीं) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #0F0F17;
    /* ... */
  }
}

/* 3. स्पष्ट डार्क मोड (JS के माध्यम से उपयोगकर्ता ने टॉगल किया) */
[data-theme="dark"] {
  --color-bg-base: #0F0F17;
  /* ... */
}

मीडिया क्वेरी में :not([data-theme="light"]) सेलेक्टर का मतलब है कि OS डार्क प्राथमिकता केवल तभी लागू होती है जब उपयोगकर्ता ने स्पष्ट रूप से लाइट मोड नहीं चुना हो।

JavaScript के साथ टॉगल मैकेनिज्म

एक अच्छी तरह से लागू किया गया टॉगल तीन काम करता है: यह तुरंत वर्तमान दिखावट बदलता है, localStorage में प्राथमिकता को सेव करता है, और पहले पेंट से पहले पेज लोड पर सेव की गई प्राथमिकता को पढ़ता है।

लोड पर प्राथमिकता पढ़ना

यह स्क्रिप्ट <head> में चलनी चाहिए — पेज रेंडर होने से पहले — गलत थीम की फ्लैश को रोकने के लिए:

<head>
  <script>
    (function() {
      const stored = localStorage.getItem('theme');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const theme = stored ?? (prefersDark ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    })();
  </script>
</head>

यह पहले पेंट से पहले <html> पर data-theme तुरंत सेट करता है।

टॉगल फंक्शन

function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

// इसे एक बटन से जोड़ें
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

टॉगल बटन स्थिति सिंक करना

टॉगल बटन वर्तमान मोड को दृश्य रूप से दर्शाना चाहिए:

<button id="theme-toggle" aria-label="Toggle dark mode">
  <span class="icon-light">☀️</span>
  <span class="icon-dark">🌙</span>
</button>

[data-theme="dark"] .icon-light { display: none; }
[data-theme="dark"] .icon-dark  { display: inline; }
[data-theme="light"] .icon-light { display: inline; }
[data-theme="light"] .icon-dark  { display: none; }

रंग अनुकूलन रणनीतियाँ

डार्क-मोड रंग चुनना आपके लाइट पैलेट को पलटने जितना सरल नहीं है।

कंट्रास्ट कम करें, केवल पलटें नहीं

शुद्ध सफेद टेक्स्ट शुद्ध काले बैकग्राउंड पर (#FFFFFF पर #000000) तकनीकी रूप से अधिकतम कंट्रास्ट है — 21:1 — लेकिन विस्तारित पढ़ने के लिए यह मानसिक रूप से थका देने वाला है। दोनों चरमों को कम करें: बॉडी टेक्स्ट के लिए #E8E8F0 जैसे ऑफ-व्हाइट और पेज बैकग्राउंड के लिए #0F0F17 जैसे बहुत गहरे नेवी का उपयोग करें।

हर टेक्स्ट/बैकग्राउंड संयोजन को सत्यापित करने के लिए कंट्रास्ट चेकर का उपयोग करें कि आपकी डार्क थीम कम से कम WCAG AA (सामान्य टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट के लिए 3:1) को पूरा करती है।

डार्क सतहों के साथ स्तरित उन्नयन

लाइट मोड में, उन्नयन आमतौर पर ड्रॉप शैडो द्वारा व्यक्त किया जाता है। डार्क मोड में, शैडो डार्क बैकग्राउंड के विरुद्ध अदृश्य हो जाती हैं। Material Design 3 ने एक अधिक प्रभावी दृष्टिकोण पेश किया: हल्की सतहें ऊंची लगती हैं।

/* डार्क मोड एलिवेशन स्केल */
--color-bg-base:     #0F0F17;  /* पेज बैकग्राउंड */
--color-bg-elevated: #1A1A2E;  /* कार्ड, साइडबार */
--color-bg-overlay:  #252540;  /* मोडल, ड्रॉपडाउन */
--color-bg-tooltip:  #2E2E4A;  /* टूलटिप */

डार्क मोड रंगों को थोड़ा कम संतृप्त करें

अत्यधिक संतृप्त रंग डार्क बैकग्राउंड पर कठोर और नियॉन जैसे दिखते हैं। डार्क मोड के लिए अपने ब्रांड रंगों को अनुकूलित करते समय, हल्कापन बढ़ाने के साथ-साथ संतृप्ति को 10–20% कम करें।

शेड जनरेटर यहाँ आदर्श है: अपने ब्रांड का प्राथमिक हरा या नीला दर्ज करें और डार्क-मोड टेक्स्ट और आइकन उपयोग के लिए 300–400 रेंज देखें।

छवियाँ और मीडिया

CSS मदद कर सकता है:

/* डार्क मोड में छवियों की कठोरता कम करें */
[data-theme="dark"] img:not([src*=".svg"]) {
  filter: brightness(0.9) contrast(1.05);
}

SVG आइकन के लिए जिन्हें अनुकूलित होने की जरूरत है, currentColor को fill मान के रूप में उपयोग करना उन्हें वर्तमान टेक्स्ट रंग को स्वचालित रूप से अपनाने देता है।

दोनों मोड की जांच

ब्राउज़र DevTools एमुलेशन

Chrome और Firefox दोनों DevTools में डार्क-मोड एमुलेशन प्रदान करते हैं। Chrome में: DevTools खोलें, तीन-बिंदु मेनू पर क्लिक करें, More Tools → Rendering पर जाएं, और "Emulate CSS media feature prefers-color-scheme" को "dark" पर सेट करें।

स्वचालित कंट्रास्ट परीक्षण

मैन्युअल स्पॉट-चेकिंग त्रुटि-प्रवण है। CI में स्वचालित कंट्रास्ट ऑडिटिंग को एकीकृत करें। कंट्रास्ट चेकर आपको किसी भी फोरग्राउंड/बैकग्राउंड जोड़े को तुरंत सत्यापित करने देता है।

सामान्य समस्याओं की जाँच सूची

  • वेरिएबल्स की बजाय कंपोनेंट CSS में हार्डकोडेड hex मान
  • हार्डकोडेड fill="#000000" वाले SVG आइकन — fill="currentColor" में बदलें
  • तृतीय-पक्ष कंपोनेंट जो data-theme का सम्मान नहीं करते
  • color-scheme प्रॉपर्टी सेट नहीं — :root में color-scheme: light dark जोड़ें
<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
}

यह छोटा सा जोड़ नेटिव स्क्रॉलबार, डेट पिकर और अन्य OS-रेंडर फॉर्म नियंत्रणों को स्वचालित रूप से अपने डार्क वेरिएंट में स्विच करा देता है।

मुख्य बातें

  • सभी रंगों को :root पर CSS कस्टम प्रॉपर्टीज़ के रूप में परिभाषित करें और [data-theme="dark"] का उपयोग करके डार्क मोड के लिए ओवरराइड करें।
  • prefers-color-scheme: dark को उन उपयोगकर्ताओं के लिए स्वचालित डिफ़ॉल्ट के रूप में उपयोग करें जिन्होंने OS को डार्क पर सेट किया है। उन उपयोगकर्ताओं के लिए localStorage परसिस्टेंस के साथ JavaScript टॉगल की परत जोड़ें जो ओवरराइड करना चाहते हैं।
  • CSS लोड होने से पहले <head> में एंटी-फ्लैश स्क्रिप्ट चलाएं।
  • डार्क मोड रंग पलटे हुए लाइट रंग नहीं हैं — चरम कंट्रास्ट कम करें, उन्नयन व्यक्त करने के लिए हल्के बैकग्राउंड का उपयोग करें।
  • कंट्रास्ट चेकर से हर टेक्स्ट/बैकग्राउंड जोड़े को सत्यापित करें और शेड जनरेटर से दोनों थीम के लिए सही शेड खोजें।
  • color-scheme: light dark और संबंधित <meta> टैग जोड़ें।

संबंधित रंग

black

#000000

blue

#0000FF

green

#008000

navy

#000080

white

#FFFFFF

संबंधित ब्रांड्स

Meta

Helping people connect

1 रंग

Drop

3 रंग

Hex

8 रंग

Must

2 रंग

Open

2 रंग

Reflect

2 रंग

संबंधित उपकरण

कंट्रास्ट चेकर

WCAG 2.1 दिशानिर्देशों के अनुसार रंग कंट्रास्ट अनुपात जांचें। सामान्य और बड़े टेक्स्ट के लिए AA और AAA अनुपालन का परीक्षण करें।

उपकरण खोलें

शेड जनरेटर

डिज़ाइन सिस्टम के लिए किसी भी बेस कलर से Tailwind CSS-शैली शेड स्केल (50-950) बनाएं।

उपकरण खोलें