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> 
