Selamlar,
Sayfa yüklenince otomatik dark mode ya da kullanıcı ne seçmiş ise o açılsın istiyorum ama yapamadım. Kodlar şöyle :

<!-- start switcher -->
<div class="switcher-body">
    <button class="btn btn-primary btn-switcher shadow-sm" type="button" data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
        <i class="bx bx-cog bx-spin"></i>
    </button>
    <div class="offcanvas offcanvas-end shadow border-start-0 p-2" data-bs-scroll="true" data-bs-backdrop="false"
        tabindex="-1" id="offcanvasScrolling">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Sistem Görünüm Ayarı</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <h6 class="mb-0">Renk Seçenekleri</h6>
            <hr>
            <div class="form-check form-check-inline">
                <input class="form-check-input theme-option" type="radio" name="theme" id="lightmode" value="light">
                <label class="form-check-label" for="lightmode">Açık</label>
            </div>
            <hr>
            <div class="form-check form-check-inline">
                <input class="form-check-input theme-option" type="radio" name="theme" id="darkmode" value="dark">
                <label class="form-check-label" for="darkmode">Koyu</label>
            </div>
            <hr>
            <div class="form-check form-check-inline">
                <input class="form-check-input theme-option" type="radio" name="theme" id="darksidebar" value="mixed">
                <label class="form-check-label" for="darksidebar">Karma</label>
            </div>
            <hr>
            <div class="form-check form-check-inline">
                <input class="form-check-input theme-option" type="radio" name="theme" id="ColorLessIcons" value="colored">
                <label class="form-check-label" for="ColorLessIcons">Renkli İkon</label>
            </div>
        </div>
    </div>
</div>
<!-- end switcher -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // PHP tarafından ayarlanan çerezi oku
    let theme = "<?php echo isset($_COOKIE['theme']) ? $_COOKIE['theme'] : 'light'; ?>";
    // Sayfanın temasını belirlemek için body'ye data-theme ekle
    document.documentElement.setAttribute("data-theme", theme);
    // Sayfa açıldığında ilgili radio butonunu seçili yap
    let selectedOption = document.querySelector(`input.theme-option[value="${theme}"]`);
    if (selectedOption) {
        selectedOption.checked = true;
        selectedOption.dispatchEvent(new Event('change')); // Event tetikleme
    }
    // Kullanıcı yeni bir tema seçtiğinde çerez güncelle ve data-theme değiştir
    document.querySelectorAll(".theme-option").forEach(option => {
        option.addEventListener("change", function () {
            document.cookie = `theme=${this.value}; path=/; max-age=31536000`; // 1 yıl geçerli çerez
            document.documentElement.setAttribute("data-theme", this.value); // Sayfanın temasını değiştir
        });
    });
    // Yazıya tıklanmasını engelle (label tıklanınca ilgili radio butonu tetikle)
    document.querySelectorAll('.form-check-label').forEach(label => {
        label.addEventListener('click', function(event) {
            const associatedRadio = document.getElementById(this.getAttribute('for'));
            if (associatedRadio) {
                associatedRadio.checked = true;
                associatedRadio.dispatchEvent(new Event('change')); // Tıklanmış gibi tetikleyelim
            }
        });
    });
});
</script>