Karanlık/Dark Mod Nasıl Yapılır? HTML, CSS, JS

👋 Merhaba!
Dark/Gece modunun nasıl yapıldığını gösterdim. Kodları aynı şekilde web sitenize ekleyebilirsiniz.
👀 Karanlık modun çalışma mantığını daha iyi anlamak için aşağıdaki css örneklerine göz atın:
.darkmode h1 {
color: white;
}
.darkmode ornek-button {
background: black;
color: white;
}
🧐 Rengini değiştirmek istediğiniz nesneyi CSS'te başına ".darkmode" ekleyerek çağırın ve istediğiniz gibi stillendirin. Umarım faydalı olmuştur.
Dark/Gece Tema Kaynak Kodu: 👇
➤ HTML
➤ CSS
➤ JavaScript
🙋‍♂️❓Varsa sorularınızı yorum yazmayı unutmayın.
İzlediğiniz için teşekkürler! 💟
#html #css #gecemodu #darkmode #wordpress

[@Yigiter.CND1]

Çok bilgilendirici bir video tavsiye ederim 👌🏻

[@alisozerx]

💟

[@alisozerx]

➤ HTML
Bir Adet Test Amaclı Başlık.

➤ CSS
@import url("cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");
/*Container Stili*/
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/*Buton Kapsayicisi Stili.*/
.sec {
display: flex;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 20px;
color: #000;
}
/*Simdi ise iconlari ekleyelim.*/
.sec.karanlik-mod::before {
content: '\F494';
font-family: 'bootstrap-icons';
}
.sec.normal-mod:before {
content: '\F5A2';
font-family: 'bootstrap-icons';
}
/*Dark Stili Verelim*/
.darkmode {
color: #fff;
background-color: black;
}
.darkmode .sec.karanlik-mod::before, .darkmode .sec.normal-mod:before {
color: #fff;
}
➤ JavaScript
//Js Kodlarini Girelim.
let darkMode = localStorage.getItem("darkMode");
function enableDarkMode () {
document.body.classList.add("darkmode");
localStorage.setItem("darkMode", "enabled");
}
function disableDarkMode() {
document.body.classList.remove("darkmode");
localStorage.setItem("darkMode", null)
}
if (darkMode === "enabled") {
enableDarkMode();
}
//icon degisimi
document.getElementById("dark-mode-toggle").addEventListener("click", function (e)
{
var target = e.target;
target.classList.toggle("karanlik-mod");
target.classList.toggle("normal-mod");
}, false);
const darkModeToggle = document.querySelector("#dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
darkMode = localStorage.getItem("darkMode");
darkMode !== "enabled" ? enableDarkMode () : disableDarkMode ();
});