xenForo Dark Mode (Gece Modu) Nasıl Yapılır?

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

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

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

}