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

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


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 से डार्क और लाइट मोड के बीच स्विच कैसे करें?

"Toggle dark mode" बटन पर क्लिक करने पर -

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


  1. CSS और JavaScript से लिस्ट ग्रिड व्यू कैसे बनाएं? CSS और JavaScript से लिस्ट ग्रिड व्यू कैसे बनाएं?

    उदाहरण लिस्ट ग्रिड व्यू बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <style>    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdan

  1. CSS और JavaScript से एक्सपैंडिंग ग्रिड कैसे बनाएं? CSS और JavaScript से एक्सपैंडिंग ग्रिड कैसे बनाएं?

    उदाहरण CSS और JavaScript से एक्सपैंडिंग ग्रिड बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       padding: 1%; &n

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

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