JavaScript Dark Mode Yapımı

JavaScript kullanarak bir web sayfasında dark mode (karanlık mod) yapmak için aşağıdaki adımları takip edebilirsiniz:

1. HTML dosyanızda, dark mode'u etkinleştirmek için kullanıcıya bir yol sağlamak için bir düğme veya anahtar oluşturun. Örneğin:

<label class="switch">
<input type="checkbox" id="dark-mode-toggle">
<span class="slider round"></span>
</label>

Genişletmek için tıkla ...

2. CSS dosyanızda, karanlık modun nasıl görüneceğini tanımlayan stilleri ekleyin. Örneğin:

body {
background-color: #000;
color: #fff;
}

Genişletmek için tıkla ...

3. JavaScript kodunu ekleyerek, dark mode düğmesine tıklama olayını dinleyin ve karanlık modun etkinleştirilip etkinleştirilmediğini kontrol edin. Örneğin:

const darkModeToggle = document.getElementById('dark-mode-toggle');
const body = document.body;

darkModeToggle.addEventListener('change', () => {
if (darkModeToggle.checked) {
enableDarkMode();
} else {
disableDarkMode();
}
});

function enableDarkMode() {
body.classList.add('dark-mode');
// Diğer öğeleri karanlık moda göre güncelleme
}

function disableDarkMode() {
body.classList.remove('dark-mode');
// Diğer öğeleri normal moda göre güncelleme
}

Genişletmek için tıkla ...

4. Bu adımlardan sonra, karanlık modun nasıl görüneceğini belirtmek için CSS stil dosyasında `dark-mode` sınıfını tanımlayabilirsiniz.

Bu yöntem, sayfanın karanlık mod ve normal mod arasında geçiş yapmasını sağlar. `enableDarkMode` işlevi dark mode'u etkinleştirirken `disableDarkMode` işlevi dark mode'u devre dışı bırakır. İşlevlerin içinde, body elementine dark mode'u temsil eden bir sınıf eklemek veya kaldırmak gibi ilgili işlemleri gerçekleştirebilirsiniz. Diğer öğeleri de aynı şekilde güncelleyebilirsiniz.

Unutmayın, bu sadece basit bir örnektir ve kullanım amacınıza ve tasarımınıza bağlı olarak daha karmaşık bir dark mode uygulaması yapabilirsiniz.

Gerçekten harika bir paylaşım elinize sağlık

Eline sağlık sametim süper konu.

Eline saglik hocam

eline sağlık

Deneyelim bakalım