PricingLoginStart free
Tailwind CSS Academy · पाठ

डार्क मोड टॉगल बनाना

एक JavaScript टॉगल लागू करें जो html तत्व पर dark वर्ग जोड़ता और हटाता हो तथा प्राथमिकता को localStorage में बनाए रखता हो।

पाठ 3, कुल 4 में से13 चरण

डार्क मोड टॉगल बनाना, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टॉगल को क्या करना चाहिए

डार्क मोड टॉगल को तीन काम करने चाहिए: उपयोगकर्ता की सुरक्षित की गई पसंद पढ़ना (या fallback के रूप में OS की पसंद पढ़ना), पृष्ठ लोड होने पर <html> तत्व पर सही class लागू करना, और उपयोगकर्ता द्वारा टॉगल button पर क्लिक करने पर class को अपडेट करके पसंद सुरक्षित करना। शुरुआती लोड को सही ढंग से संभालना अत्यंत महत्वपूर्ण है — पृष्ठ render होने से पहले class लागू करने पर गलत theme की झलक दिखाई नहीं देती।

गलत Theme की झलक रोकना

डार्क मोड की सबसे सामान्य bug तब होती है जब डार्क मोड इस्तेमाल करने वाला उपयोगकर्ता पृष्ठ refresh करता है और उसे हल्की theme की झलक दिखाई देती है। ऐसा इसलिए होता है क्योंकि JavaScript HTML के parse और render हो जाने के बाद चलता है। इसका समाधान <head> में — किसी भी CSS या body content से पहले — एक छोटी inline <script> चलाना है, जो localStorage को पढ़कर आवश्यकता होने पर तुरंत dark class जोड़ दे।

<!-- Place this FIRST inside <head> -->
<script>
  if (localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  }
</script>

टॉगल के लिए HTML संरचना

टॉगल बटन स्वयं <button> जितना सरल हो सकता है, जिसमें सूर्य और चंद्रमा के आइकन हों। डार्क मोड में सूर्य का आइकन दिखाएँ, ताकि लाइट मोड पर स्विच किया जा सके, और लाइट मोड में चंद्रमा का आइकन दिखाएँ, ताकि डार्क मोड पर स्विच किया जा सके। वर्तमान मोड के आधार पर दिखाई देने वाले आइकन को बदलने के लिए Tailwind के hidden और block को dark: वैरिएंट के साथ उपयोग करें।

<button id="theme-toggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
  <!-- Moon icon (visible in light mode) -->
  <svg id="icon-moon" class="w-5 h-5 text-gray-800 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
  </svg>
  <!-- Sun icon (visible in dark mode) -->
  <svg id="icon-sun" class="w-5 h-5 text-yellow-400 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 2a1 1 0 100 2 1 1 0 000-2zm0 14a1 1 0 100 2 1 1 0 000-2z" />
  </svg>
</button>

टॉगल JavaScript लिखना

टॉगल फ़ंक्शन जाँचता है कि dark क्लास इस समय <html> पर मौजूद है या नहीं। यदि मौजूद है, तो फ़ंक्शन उसे हटाकर 'light' को localStorage में सहेज देता है। यदि मौजूद नहीं है, तो फ़ंक्शन उसे जोड़कर 'dark' को सहेज देता है। यह तरीका साफ़, उलटने योग्य है और किसी बाहरी लाइब्रेरी या फ्रेमवर्क के बिना काम करता है।

const toggle = document.getElementById('theme-toggle');

toggle.addEventListener('click', () => {
  const html = document.documentElement;

  if (html.classList.contains('dark')) {
    html.classList.remove('dark');
    localStorage.setItem('theme', 'light');
  } else {
    html.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  }
});

OS की पसंद को डिफ़ॉल्ट के रूप में अपनाना

यदि उपयोगकर्ता ने आपके टॉगल के साथ कभी इंटरैक्ट नहीं किया है, तो localStorage में कुछ भी नहीं होगा। ऐसी स्थिति में, OS की prefers-color-scheme मीडिया क्वेरी को फ़ॉलबैक के रूप में उपयोग करें। window.matchMedia API आपको रनटाइम पर इसकी जाँच करने देता है। यदि OS डार्क मोड में है और उपयोगकर्ता ने इसे ओवरराइड नहीं किया है, तो dark क्लास लागू करें, ताकि शुरुआती अनुभव उनकी सिस्टम सेटिंग से मेल खाए।

function getInitialTheme() {
  const saved = localStorage.getItem('theme');
  if (saved) return saved;

  // No saved preference — use OS setting
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

if (getInitialTheme() === 'dark') {
  document.documentElement.classList.add('dark');
}

पूरा टॉगल कार्यान्वयन

सब कुछ एक साथ रखने पर: इनलाइन हेड स्क्रिप्ट बिना फ्लैश के शुरुआती लोड को संभालती है, बटन HTML आइकन बदलने के लिए dark: वैरिएंट का उपयोग करता है, और क्लिक हैंडलर क्लास को टॉगल करके उसे localStorage में सहेजता है। यह संपूर्ण तरीका अधिकांश Tailwind-आधारित ऐप्लिकेशन में उपयोग किया जाने वाला मानक तरीका है। इसके लिए किसी निर्भरता की आवश्यकता नहीं होती और यह किसी भी वातावरण में काम करता है।

<!-- In <head> (anti-flash) -->
<script>
  const saved = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  if (saved === 'dark' || (!saved && prefersDark)) {
    document.documentElement.classList.add('dark');
  }
</script>

<!-- In body JS -->
<script>
  document.getElementById('theme-toggle').addEventListener('click', () => {
    const isDark = document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>

स्मूद ट्रांज़िशन वाला टॉगल बटन

अपने body या रूट कंटेनर पर transition-colors क्लास लगाकर थीम स्विच में एक संतोषजनक एनीमेशन जोड़ें। इससे सभी रंग तुरंत बदलने के बजाय आसानी से एनीमेट होते हैं। ट्रांज़िशन की अवधि कम रखें — लगभग 200–300ms — ताकि प्रतिक्रिया तेज़ महसूस हो। इसे सबसे ऊपरी कंटेनर स्तर पर लागू करें, ताकि सभी चाइल्ड एलिमेंट इस स्मूद ट्रांज़िशन व्यवहार को इनहेरिट कर सकें।

<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
  <!-- All children now transition smoothly between light and dark -->
</body>

React कंपोनेंट में टॉगल

React में, useState से डार्क मोड की स्थिति प्रबंधित करें और useEffect का उपयोग करके उसे DOM तथा localStorage के साथ सिंक्रोनाइज़ करें। एक सामान्य तरीका कस्टम useDarkMode हुक बनाना है, जो सारा तर्क समाहित करता है। DOM क्लास में बदलाव को इफ़ेक्ट के अंदर ट्रिगर करें, ताकि वह React स्थिति के साथ सिंक्रोनाइज़ रहे।

import { useState, useEffect } from 'react';

function useDarkMode() {
  const [dark, setDark] = useState(() => localStorage.getItem('theme') === 'dark');

  useEffect(() => {
    document.documentElement.classList.toggle('dark', dark);
    localStorage.setItem('theme', dark ? 'dark' : 'light');
  }, [dark]);

  return [dark, setDark];
}

Next.js ऐप में टॉगल

Next.js में, किसी कंपोनेंट के माध्यम से एंटी-फ्लैश स्क्रिप्ट को <head> में आसानी से नहीं रखा जा सकता, क्योंकि React हाइड्रेशन HTML के पार्स होने के बाद चलता है। सुझाया गया तरीका है कि इनलाइन स्क्रिप्ट को next/script के माध्यम से strategy='beforeInteractive' के साथ जोड़ें, या उसे सीधे Head कंपोनेंट के अंदर मौजूद कस्टम _document.js फ़ाइल में रखें। इससे यह सुनिश्चित होता है कि पेज रेंडर होने से पहले स्क्रिप्ट समकालिक रूप से चल जाए।

// pages/_document.js (Next.js Pages Router)
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script dangerouslySetInnerHTML={{ __html: `
          const t = localStorage.getItem('theme');
          const d = window.matchMedia('(prefers-color-scheme: dark)').matches;
          if (t === 'dark' || (!t && d)) document.documentElement.classList.add('dark');
        ` }} />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  );
}

रनटाइम पर OS में होने वाले बदलाव सुनना

कभी-कभी उपयोगकर्ता आपके ऐप के खुले होने के दौरान अपने OS की थीम बदल देते हैं। आप window.matchMedia के change इवेंट का उपयोग करके इन बदलावों को सुन सकते हैं। OS की पसंद में बदलाव तभी लागू करें, जब उपयोगकर्ता ने आपके ऐप में कोई स्पष्ट पसंद सेट न की हो — अन्यथा आप उनकी ऐप के अंदर की पसंद को ओवरराइड कर देंगे। इससे उपयोगकर्ता को सबसे सम्मानजनक अनुभव मिलता है।

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

mediaQuery.addEventListener('change', (e) => {
  // Only auto-update if the user hasn't set an explicit preference
  if (!localStorage.getItem('theme')) {
    document.documentElement.classList.toggle('dark', e.matches);
  }
});

टॉगल की पहुँच-सुलभता संबंधी बातें

डार्क मोड का टॉगल बटन कीबोर्ड से उपयोग करने योग्य होना चाहिए और इसमें अर्थपूर्ण aria-label होना चाहिए, जो वर्तमान क्रिया के अनुसार अपडेट हो। स्क्रीन रीडर को वर्तमान स्थिति बताने के लिए aria-pressed का उपयोग करें। चूँकि केवल एक दृश्य आइकन बदलता है, इसलिए स्क्रीन रीडर उपयोगकर्ताओं को यह समझने के लिए लेबल की आवश्यकता होती है कि बटन दबाने पर क्या होगा।

<button
  id="theme-toggle"
  aria-label="Switch to dark mode"
  aria-pressed="false"
  class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700"
>
  <!-- icons -->
</button>

<script>
  const btn = document.getElementById('theme-toggle');
  btn.addEventListener('click', () => {
    const isDark = document.documentElement.classList.toggle('dark');
    btn.setAttribute('aria-pressed', isDark);
    btn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>

त्वरित जाँच

Tailwind CSS के साथ डार्क मोड टॉगल बनाने की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: इनलाइन हेड स्क्रिप्ट पेज लोड होने पर गलत थीम के क्षणिक प्रदर्शन को रोकती है, classList.toggle('dark') को localStorage के साथ मिलाने पर उपयोगकर्ता के लिए स्थायी टॉगल बनता है, और matchMedia तब OS की पसंद को डिफ़ॉल्ट के रूप में अपनाने देता है, जब उपयोगकर्ता की कोई पसंद सहेजी न गई हो। आगे हम कार्ड, नेविगेशन बार और मोडल जैसे जटिल कंपोनेंट पर डार्क मोड लागू करेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
30
पाठ
120
निःशुल्क सीखना शुरू करेंपूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “डार्क मोड टॉगल बनाना” पाठ निःशुल्क है?

हाँ—“डार्क मोड टॉगल बनाना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“डार्क मोड टॉगल बनाना” में मैं क्या सीखूँगा?

एक JavaScript टॉगल लागू करें जो html तत्व पर dark वर्ग जोड़ता और हटाता हो तथा प्राथमिकता को localStorage में बनाए रखता हो। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“डार्क मोड टॉगल बनाना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. डार्क मोड रणनीतियाँ
  2. डार्क रूपांतर लागू करना
  3. डार्क मोड टॉगल बनाना
  4. जटिल घटकों के लिए डार्क मोड
← Tailwind CSS Academy पर वापस जाएँ