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:
2. CSS dosyanızda, karanlık modun nasıl görüneceğini tanımlayan stilleri ekleyin. Örneğin:
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:
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.
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>
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;
}
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
}
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.