Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS और JavaScript के साथ डार्क और लाइट मोड के बीच कैसे स्विच करें?


जावास्क्रिप्ट के साथ डार्क और लाइट मोड के बीच स्विच करने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      padding: 25px;
      background-color: white;
      color: black;
      font-size: 25px;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .dark-mode {
      background-color: black;
      color: white;
   }
   .toggleButton {
      padding: 12px;
      font-size: 18px;
      border: 2px solid green;
   }
</style>
</head>
<body>
<h1>Toggle Dark/Light Mode Example</h1>
<button class="toggleButton">Toggle dark mode</button>
<h2>Click the above button to toggle dark mode</h2>
<script>
   document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode);
   function toggleDarKMode() {
      var element = document.body;
      element.classList.toggle("dark-mode");
   }
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS और JavaScript के साथ डार्क और लाइट मोड के बीच कैसे स्विच करें?

"टॉगल डार्क मोड" बटन पर क्लिक करने पर -

CSS और JavaScript के साथ डार्क और लाइट मोड के बीच कैसे स्विच करें?


  1. कैसे सीएसएस और जावास्क्रिप्ट के साथ एक सूची ग्रिड दृश्य बनाने के लिए? कैसे सीएसएस और जावास्क्रिप्ट के साथ एक सूची ग्रिड दृश्य बनाने के लिए?

    सूची ग्रिड दृश्य बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style>    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, san

  1. सीएसएस और जावास्क्रिप्ट के साथ एक विस्तारित ग्रिड कैसे बनाएं? सीएसएस और जावास्क्रिप्ट के साथ एक विस्तारित ग्रिड कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ एक विस्तृत ग्रिड बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       padding: 1%;

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

    किसी पेज के टेक्स्ट-कलर और बैकग्राउंड का रंग बदलकर, हम अपनी वेबसाइट के लिए डार्क/लाइट मोड जोड़ सकते हैं। सिंटैक्स डार्क मोड लागू करने के लिए निम्न सिंटैक्स का उपयोग किया जा सकता है। चयनकर्ता {रंग:सफ़ेद; पृष्ठभूमि-रंग:काला} उदाहरण div { font-size:1.4em; पाठ-संरेखण:केंद्र; } .डार्क {रंग:सफ़ेद; पृष