Herkese selam 
Vanilla JavaScript kullanarak nasıl bir karanlık tema uygulaması yapılır, onu gösterdim. Nasıl yapıldığını görmek ve siz de yapmak isterseniz aşağıdaki Codepen linkine göz atabilirsiniz.
Makaleyi düzenleyen moderatöre teşekkür ederim. Nedense kendim eklerken Javascript kodunu hata aldım consoleda.
Vanilla JavaScript kullanarak nasıl bir karanlık tema uygulaması yapılır, onu gösterdim. Nasıl yapıldığını görmek ve siz de yapmak isterseniz aşağıdaki Codepen linkine göz atabilirsiniz.
HTML:
<button id="switch" class="switch"></button>
CSS:
* {
/* Tarayıcı css sıfırlama */
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
list-style: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/*
:root sözde sınıfı, en üst düzey ebeveyn öğesini temsil eder. Yani bir html sayfada bu html etiketi anlamına geliyor.
Fakat css’in kullanım alanlarının artmasıyla örneğin svg ve xml’de kullanılırken, :root sözde sınıfı başka bir öğeyi temsil ediyor olabilir.
*/
:root {
--bg: #fff;
--button-bg: #000;
--button-color: #fff;
--button-hover: rgba(0, 0, 0, 0.87);
}
.dark-mode:root {
--bg: #000;
--button-bg: #fff;
--button-color: #000;
--button-hover: rgba(255, 255, 255, 0.85);
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: var(--bg);
transition: background 500ms;
}
.switch {
width: auto;
height: 50px;
cursor: pointer;
color: var(--button-color);
font-size: 18px;
background: var(--button-bg);
border-radius: 5px;
text-transform: uppercase;
padding: 0 20px;
transition: 500ms background-color;
}
.switch i {
margin-right: 15px;
}
i.fas.fa-moon {
color: #fff;
}
i.fas.fa-sun {
color: #FDB813;
}
.switch:hover {
background-color: var(--button-hover);
}
JavaScript:
// Tema değiştirici buttonumuzu bir değişkene atıyoruz
const switcher = document.querySelector('#switch')
// Sayfa yüklendiği zaman fonksiyon çalıştır
document.addEventListener('DOMContentLoaded', () => {
// dark keyine sahip bir localstorage itemi var mı kontrol et
if(localStorage.getItem('dark')) {
// Varsa html etiketine dark-mode ekle ve buttonumuzun içeriğini değiştir
document.documentElement.classList.add('dark-mode')
switcher.innerHTML = `<i class="fas fa-sun"></i> Aydınlık tema`
} else {
// Yoksa html etiketine dark-mode ekle ve buttonumuzun içeriğini değiştir
switcher.innerHTML = `<i class="fas fa-moon"></i> Karanlık tema`
}
})
// Buttonumuza tıklandığı zaman fonksiyon çalıştır
switcher.addEventListener('click', () => {
// Html etiketinde dark-mode classini toggle et. Yani varsa sil yoksa ekle classı
document.documentElement.classList.toggle('dark-mode');
// Eğer bu class htmlde tanımlıysa
if(document.documentElement.classList.contains('dark-mode')) {
// buttonumuzun içeriğini değiştir ve dark keyine sahip değeri true olan bir localstorage itemi oluştur
switcher.innerHTML = `<i class="fas fa-sun"></i> Aydınlık tema`
localStorage.setItem('dark', true)
} else {
// Eğer bu class htmlde tanımlı değilse buttonumuzun içeriğini değiştir ve dark keyine sahip localstorage itemini sil
switcher.innerHTML = `<i class="fas fa-moon"></i> Karanlık tema`
localStorage.removeItem('dark')
}
})Makaleyi düzenleyen moderatöre teşekkür ederim. Nedense kendim eklerken Javascript kodunu hata aldım consoleda.
)*/
