سلام وقتتون بخیر باشه

تا اونجایی که من متوجه شدم از لوکال استوریج صرفا برای این استفاده کردیم تا بتونیم ترجیح کاربر در دارک یا روشن بودن صفحه حتی بعد از رفرش شدن رو ذخیره کنیم.

اما چه نیازی هست که به صورت داینامیک از value لوکال استوریج اسفتاده کنیم و کدمون پیچیده‌تر بشه؟

من کدم رو به شکل زیر نوشتم و بدون مشکل کار میکنه:

jQuery(document).ready(function(){
    jQuery('#switchCheckbox').change(function(){
        
        if(this.checked){
            localStorage.setItem('themeMode','dark');
            jQuery('body').addClass('dark'); 
        }else{
            localStorage.clear('themeMode');
            jQuery('body').removeClass('dark'); 
        }
    
    })
   
    if(localStorage.getItem('themeMode')){
        jQuery('#switchCheckbox').attr('checked',true);
        jQuery('body').addClass('dark');
    }else{
        jQuery('#switchCheckbox').removeAttr('checked');
    }
})

و همونطور که جناب مرادی توی تاپیک‌های قبلی توضیح دادن ، با یک کلس و استفاده از سلکتور‌های css میشه به کل عناصر استایل مخصوص دارک مود داد. اگه کدم ایرادی داره ممنون میشم بگین.

و اما برای تمرین شخصی سعی کردم کد رو جوری بنویسم که مود صفحه وابسته به value لوکال استوریج بشه :

jQuery(document).ready(function(){
    jQuery('#switchCheckbox').change(function(){
        
        let mode = {
            "lightMode" : "lightMode",
            "darkMode" : "darkMode"
        }
            
        if(this.checked){
            localStorage.setItem('themeMode' , mode.darkMode);
        }else{
            localStorage.setItem('themeMode' , mode.lightMode);
        }
    
    })
    if(localStorage.getItem('themeMode') == 'darkMode'){
        jQuery('body').addClass('dark');
        jQuery('#switchCheckbox').attr('checked' , true);
    }else if(localStorage.getItem('themeMode') == 'lightMode'){
        jQuery('body').removeClass('dark');
        jQuery('#switchCheckbox').removeAttr('checked');
    }
   
})

کد درست کارشو انجام میده فقط مشکلی که داره اینه که حتما باید صفحه رفرش بشه تا بخش انتهایی کد که استایل رو اضافه میکنه اعمال بشه ، که با توجه به اینکه خارج ازایونت change نوشته شده و فقط یکبار در ابتدای لود صفحه اجرا میشه طبیعیه.

راه حل این مشکل چیه؟