Dark mode inputunu iki yerde kullanmak?

goxaria 1176 gün önce

426 defa görüntülendi

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);
});

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

tayfunerbilen

1176 gün önce

@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.

demo: https://codepen.io/tayfunerbilen/pen/jOwVrGm

#007229

erkamalper

1173 gün önce

@tayfunerbilen, onu unutmuşum hocam :). Teşekkürler.

#007277

erkamalper

1176 gün önce

document.querySelectorAll('#mode-btn').forEach((x) => {
    x.addEventListener('click', () => {
        document.body.classList.toggle('dark');
        setCookie('mode', document.body.classList, 99999);
    });
});

#007228