বডি এলিমেন্টে ক্লাস টগল করে এবং CSS-এ ডার্ক মোড স্টাইল ডিফাইন করে সহজে ডার্ক/লাইট মোড সুইচ করা যায়।
উদাহরণ: ডার্ক/লাইট মোড টগল
<!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;
transition: background-color 0.3s, color 0.3s;
}
.dark-mode {
background-color: black;
color: white;
}
.toggleButton {
padding: 12px;
font-size: 18px;
border: 2px solid green;
cursor: pointer;
}
</style>
</head>
<body>
<h1>টগল ডার্ক/লাইট মোড উদাহরণ</h1>
<button class="toggleButton">ডার্ক মোড টগল করুন</button>
<h2>উপরোক্ত বাটনে ক্লিক করুন ডার্ক মোড টগল করতে</h2>
<script>
document.querySelector(".toggleButton").addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
কোড ব্যাখ্যা
- body-এ transition: মোড পরিবর্তন স্মুথ হয়।
- .dark-mode ক্লাস: ডার্ক থিমের রঙ ডিফাইন করে।
- classList.toggle(): ক্লাস থাকলে সরায়, না থাকলে যোগ করে।
উন্নত সংস্করণ
`localStorage` ব্যবহার করে ইউজারের পছন্দ সংরক্ষণ করুন এবং `prefers-color-scheme` মিডিয়া কোয়েরি দিয়ে সিস্টেম প্রিফারেন্স ডিটেক্ট করুন।
