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

परिचय

किसी वेबपेज के टेक्स्ट और बैकग्राउंड रंग को बदलकर, हम अपनी वेबसाइट के लिए डार्क/लाइट मोड लागू कर सकते हैं। यह उपयोगकर्ता अनुभव को बेहतर बनाता है, खासकर कम रोशनी की स्थितियों में।

बुनियादी सिंटैक्स

डार्क मोड लागू करने के लिए निम्नलिखित CSS सिंटैक्स का उपयोग किया जा सकता है:

selector {
  color: white;
  background-color: black;
}

उदाहरण 1: बेसिक टॉगल कार्यान्वयन

यह उदाहरण दर्शाता है कि जावास्क्रिप्ट का उपयोग करके डार्क मोड को कैसे टॉगल किया जाए:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      font-size: 1.4em;
      text-align: center;
    }
    .dark {
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <div>
    <p>Suspendisse eget finibus nulla, a pulvinar est. Suspendisse eget eleifend nibh. In nec massa molestie, vehicula sapien a, consectetur nunc.</p>
    <button id="btn" onclick="change()">Normal Mode</button>
  </div>
  <script>
    let btnText = document.getElementById("btn");
    function change() {
      let body = document.body;
      body.classList.toggle("dark");
      if (btnText.innerHTML === "Normal Mode") {
        btnText.innerHTML = "Dark Mode!";
      } else {
        btnText.innerHTML = "Normal Mode";
      }
    }
  </script>
</body>
</html>

उदाहरण 2: इमेज के साथ डार्क मोड

यह उदाहरण दिखाता है कि इमेज और अन्य तत्वों के साथ डार्क मोड कैसे काम करता है:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      font-size: 1.4em;
      text-align: center;
    }
    .dark {
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <div>
    <button id="btn" onclick="change()">Normal Mode</button>
    <p>Duis tincidunt auctor posuere.</p>
    <img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
  </div>
  <script>
    let btnText = document.getElementById("btn");
    function change() {
      let body = document.body;
      body.classList.toggle("dark");
      if (btnText.innerHTML === "Normal Mode") {
        btnText.innerHTML = "Dark Mode!";
      } else {
        btnText.innerHTML = "Normal Mode";
      }
    }
  </script>
</body>
</html>

बेहतर दृष्टिकोण: CSS कस्टम प्रॉपर्टीज (CSS Variables)

आधुनिक दृष्टिकोण के लिए, बेहतर रखरखाव और थीमिंग के लिए CSS कस्टम प्रॉपर्टीज का उपयोग करें:

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --btn-bg: #f0f0f0;
    }
    [data-theme="dark"] {
      --bg-color: #1a1a1a;
      --text-color: #f0f0f0;
      --btn-bg: #333333;
    }
    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }
    button {
      background-color: var(--btn-bg);
      color: var(--text-color);
      border: 1px solid var(--text-color);
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <h1>डार्क/लाइट मोड डेमो</h1>
    <p>यह आधुनिक दृष्टिकोण CSS वेरिएबल्स का उपयोग करता है।</p>
    <button id="theme-toggle">डार्क मोड सक्षम करें</button>
  </div>
  <script>
    const toggle = document.getElementById('theme-toggle');
    toggle.addEventListener('click', () => {
      const html = document.documentElement;
      const isDark = html.getAttribute('data-theme') === 'dark';
      html.setAttribute('data-theme', isDark ? 'light' : 'dark');
      toggle.textContent = isDark ? 'डार्क मोड सक्षम करें' : 'लाइट मोड सक्षम करें';
    });
  </script>
</body>
</html>

बेस्ट प्रैक्टिसेज

• system-prefers-color-scheme मीडिया क्वेरी का उपयोग करके उपयोगकर्ता की सिस्टम प्राथमिकता का सम्मान करें
• थीम प्राथमिकता को localStorage में सहेजें
• स्मूथ ट्रांज़िशन के लिए CSS ट्रांज़िशन जोड़ें
• डार्क मोड में भी उचित कंट्रास्ट अनुपात सुनिश्चित करें
• केवल बैकग्राउंड ही नहीं, सभी UI तत्वों (बॉर्डर, शैडो, फॉर्म कंट्रोल) को थीम करें