Koyu Mod Ayarları | Cevap #10971

JQuery ile <link> elementinin href attribute'sini değiştirebileceğiniz bir örnek yapalım.
href değerini değiştirmek isteyeceğiniz elemente "data-style-mode" diye bir attribute verelim ki seçebilelim.

<link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />

// Elementi jquery ile seçelim.
const $styleElement = $('[data-style-mode]');

// Mod değiştiren fonksiyon
function setStyleMode(type='light') {
    if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
    else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
}

// Modu toggle eden fonksiyon
function toggleStyleMode() {
    const currentMode = $styleElement.attr('data-style-mode');
    setStyleMode(currentMode=='light' ? 'dark' : 'light');
}

Sayfanın modunu anlık olarak güncelleyecektir. Ama sayfa yenilendiğinde veya başka bir sayfaya geçildiğinde bu ayar iptal olmuş olacak.
Kalıcılığı sağlamak için mevcut modu cookie'lere yazabilir ve sunucu taraflı bir kontrolle ilk yüklenen stil dosyasını cookie'deki stil dosyasıyla değiştirebilirsiniz.
JQuery kullanıyorsanız kolay cookie yönetimi için https://github.com/js-cookie/js-cookie projesinden faydalanabilirsiniz.
CDN için: https://cdnjs.com/libraries/js-cookie

Yok ben sunucu tarafına bu işi taşımak istemiyorum, front-end'de halledelim derseniz de localStorage'dan yardım alabilirsiniz.

<head>
    <!-- head tag'ı içerikleri -->
    
    <link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />
    <script>
        const $styleElement = $('[data-style-mode]');
        if(localStorage.getItem('style-mode')) {
            const mode = localStorage.getItem('style-mode');
            if(mode=='dark') {
                $styleElement.attr('data-style-mode', 'dark').attr('href', 'assets/styles/dark.css');
            }
        }
    </script>
</head>
<body>
    
    <!-- body tag'ı içerikleri -->
    
    <script>
        // Mod değiştiren fonksiyon
        function setStyleMode(type='light') {
            if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
            else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
            localStorage.setItem('style-mode', type);
        }
        
        // Modu toggle eden fonksiyon
        function toggleStyleMode() {
            const currentMode = $styleElement.attr('data-style-mode');
            const targetMode = currentMode=='light' ? 'dark' : 'light';
            setStyleMode(targetMode);
            return targetMode;
        }
    </script>
</body>