W3.CSS qorong‘i rejim
Qorong‘i rejim
Qorong‘i rejimda to‘q fon ranglari va och rangli matn ishlatiladi.
W3.CSS yordamida w3-black klassini qo‘shish yoki olib tashlash orqali yorug‘ va qorong‘i rejimlar o‘rtasida almashishingiz mumkin.
Misol
<button class="w3-button w3-black" onclick="darkMode()">Toggle Dark Mode</button>
<script>
function darkMode() {
document.body.classList.toggle("w3-black");
}
</script>
Bu qanday ishlaydi
document.body xususiyati <body> elementiga ishora qiladi.
classList.toggle() metodi w3-black klassi mavjud bo‘lmasa, uni qo‘shadi, agar allaqachon mavjud bo‘lsa, olib tashlaydi.
Shu tufayli bitta tugmaning o‘zi yorug‘ va qorong‘i rejimlar o‘rtasida almashtira oladi.
Bitta bo‘lim uchun qorong‘i rejim
Qorong‘i rejimni butun sahifa o‘rniga faqat bitta bo‘limda ham yoqishingiz mumkin.
Misol
<div id="demo" class="w3-container">
<h2>Dark Mode Section</h2>
<p>Click the button to change this section.</p>
</div>
<button class="w3-button w3-black" onclick="darkMode()">Toggle Dark Mode</button>
<script>
function darkMode() {
document.getElementById("demo").classList.toggle("w3-black");
}
</script>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!