Dark mode inputunu iki yerde kullanmak?
Tayfun Hocanın yayımladığı dark mode tekniğini kullanıyorum...
Kodu iki yerde bir footer bir de headerda çalıştırmak istediğimde önce gelen kod çalışıyor çünkü ortada input var ve aynı idi kullanıyor ikisinin aynı anda select olması gerekiyor...
Nasıl iki yerde de aynı kodu birbirini tetikleyecek şekilde kullanırım?
html tarafı
<label class="mode-control">
<input id="mode-btn" class="mode-btn" name="mode-btn"
<?=cookiecheck('mode') == 'dark' ? 'checked' : null ?> type="checkbox">
<span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.darkmode')}}"></span>
<span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.lightmode')}}"></span>
</label>
ve js
// Dark Mode
document.getElementById('mode-btn').addEventListener('click', () => {
document.body.classList.toggle('dark');
setCookie('mode', document.body.classList, 99999);
});
@erkamalper, ID olduğu için döngüye sokamazsın tekillikten dolayı
şöyle yapabilirsin, input'un yine bir tane olur. bunu dışarıda herhangi bir yerde tutabilirsin önemli değil.
<input id="mode-btn" class="mode-btn" name="mode-btn"
<?=cookiecheck('mode') == 'dark' ? 'checked' : null ?> type="checkbox">
<!-- header için olan kodların -->
<label for="mode-btn" class="mode-control">
<span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.darkmode')}}"></span>
<span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.lightmode')}}"></span>
</label>
<!-- footer için olan kodların -->
<label for="mode-btn" class="mode-control">
<span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.darkmode')}}"></span>
<span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
title="{{ __('general.lightmode')}}"></span>
</label>
yazdığın javascript şu an geçerli olacaktır. Tek ihtiyacın belki switch işleminde görselleri değiştirmek. Onu da body classına göre kontrol edebilirsin
body:not(.dark) .mode-control span:not(:first-child) {
display: none;
}
body.dark .mode-control span:not(:last-child) {
display: none;
}
bu şekilde kontrol edebilirsin.