XenForo 2.2.x Dark Mode (Gece Modu) Yapımı

[admin]

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.

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

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

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

}