हेल्लो दोस्तों, आज हम इस पोस्ट में आपको अपने ब्लॉग या वेबसाइट के पेज को कैसे Dark Mode का बटन create करते है उसके बारे में बताने वाले है जिसे HTML CSS एवं Java Code के माध्यम से बनाया गया है नीचे दिए गए Source Code को आप कॉपी कर सकते है
Dark Mode Button Demo
नीचे दिखाए गए Demo में आप देख सकते है
Dark Mode Button CSS Code
.dark-mode {
background-color: black;
color: white;
}
.btn {
border: none;
background-color: hsl(360, 91%, 36%);
border-radius: 25px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
color: hsl(0, 0%, 100%);
display: inline-block;
font-size: 22px;
line-height: 22px;
margin: 16px 16px 16px 20px;
padding: 14px 34px;
text-align: center;
cursor: pointer;
}
उपरोक्त दिए गए code .dark-mode में आप Dark Mode के background कलर एवं फॉण्ट के कलर को अपने अनुसार बदल सकते है तथा इस .btn कोड के अंतर्गत बाप बटन का कस्टमाइज कर सकते है
Dark Mode Button HTML Code
<div class='btn'>
<btn onclick="Function()">Dark Mode</btn>
</div>
ऊपर दिए गए गए HTML Code से हम Dark Mode के बटन को नाम दिए है तथा उपरोक्त Function वाले कोड के मदद से बटन पर क्लिक किये गए कार्य को Java Code के जरिये काम करेगा
Dark Mode Button Java Code
<script>
function Function() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
CSS एवं HTML कोड को लिखने के बाद उपरोक्त दिए गए java code को इसी code के साथ compile करेंगे
Dark Mode Button Source Code
नीचे दिए गए गए Source Code के नीचे Copy Code वाले बटन पर क्लिक करके आप उपरोक्त Code को कॉपी कर सकते है