xenForo Dark Mode Nasıl Yapılır?

Adanalı

Flatkolik.Net
Yönetici
10
Katılım
9 Haziran 2018
Mesajlar
3,899
Çözümler
5
Reaksiyon puanı
1,010
Şube
Adana
Cinsiyet
Erkek
Merhaba, xenForo forumları için Dark Mode işleminin nasıl yapıldığı hakkında işlemleri anlatmak istiyorum. Umarım faydalı ve anlaşılır bir anlatım olur.

Aşağıdaki vermiş olduğum kod Dark moduna geçiş için gerekli buton ve javascript kodlarıdır. Temanızda PAGE_CONTANIER şablonunda butonu göstermek istediğiniz alana ekleyebilirsiniz.

Kod:
    <div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"><i class="gece_temasi" title="Gece Modu" data-original-title="Gece Modu"></i><i class="gunduz_temasi" title="Gündüz Modu" data-original-title="Gündüz Modu"></i></div>
    </label>
        <script type="text/javascript">
        const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
 
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
         document.body.classList.toggle('dark');
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
         document.body.classList.toggle('dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
           document.body.classList.toggle('dark');
    }   
}

toggleSwitch.addEventListener('change', switchTheme, false);
        </script> </div>

Aşağıdaki kodu extra.less şablonuna ekleyebilirsiniz.

Kod:
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    padding:0px;
}


.theme-switch input {
    display: none
}

.slider {
    cursor: pointer;
    padding: 0px 10px;
}

.gunduz_temasi:after {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    content: "\f185";
    color: #ffff00;
}

[data-theme="light"] .gunduz_temasi:after {
    display: none !important
}

[data-theme="light"] .gece_temasi:after {
    font-style: normal;
    font-weight: 300;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    font-family: 'Font Awesome 5 Pro';
    content: "\f186";
    color: #fff
}

Bunların ardından temanızın dark modunu göstermek için aşığıdaki kodu exta.less şablonuna ekleyerek temanız için gerekli düzenlemeleri yapmanız gerekmektedir.

Kod:
[data-theme="light"] {

buraya temanızın dark modu için css kodlarını yazmanız gerekmektedir.

Örnek:

.overlay-title {
background: #000;
}

Gibi eklemeler yapmanız gerekmektedir.

}
 

Lady Nur

Admin
10
Katılım
24 Eylül 2020
Mesajlar
1,087
Reaksiyon puanı
321
Cinsiyet
Kadın
Bilgilendirme için Tşklr Ablacımm.