कैसे करें - डार्क मोड टॉगल करें
CSS और JavaScript के साथ डार्क और लाइट मोड के बीच स्विच करें।
टॉगल क्लास
चरण 1) HTML जोड़ें:
किसी भी तत्व का उपयोग करें जो उस सामग्री को संग्रहीत करे जिसके लिए आप डिज़ाइन को चालू करना चाहते हैं। हमारे उदाहरण में, हम <body>सादगी के लिए उपयोग करेंगे:
उदाहरण
<body>
चरण 2) सीएसएस जोड़ें:
<body>तत्व को स्टाइल करें और .dark-modeटॉगल के लिए एक क्लास बनाएं:
उदाहरण
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
<body>तत्व प्राप्त करें और .dark-modeकक्षा के बीच टॉगल करें:
उदाहरण
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
युक्ति: यह भी देखें कि कक्षा कैसे जोड़ें ।
युक्ति: हमारे जावास्क्रिप्ट संदर्भ में क्लासलिस्ट प्रॉपर्टी के बारे में और जानें ।