Retreiving JS cookies work on apache localhost but not on the server

Question

I'm adding light mode to my website but I'm facing the problem when I try to retrieve that cookie to display either dark or light mode. Everything works perfectly and as intended with apache localhost but whenever I upload it to the actual server that's when things go wrong, it does save the dark/light mode cookie in the browser but doesn't actually display the mode which is suppose to be displayed. For a better demonstration, here's how I set a cookie and retrieve it:

$('.change_mode').click(function () {

    if ($('body').hasClass('light-mode')) {
        $('body').removeClass('light-mode');

        document.cookie = "lightMode=false";

        $('.change_mode img').attr('src', 'img/sun.png');
        $('body').css('background', 'url("img/landing_bg_dark.png") no-repeat center center');
        $('body').css('background-size', 'cover');
        $('.menu_open img').attr('src', 'img/menu_dark.png');
        $('.left_side img').attr('src', 'img/logo_dark.png');
        $('.menu_close img').attr('src', 'img/x_dark.png');
        
        $('.img_name img').attr('src', 'img/user-contact.png');
        $('.img_email img').attr('src', 'img/email-contact.png');
        $('.img_phone img').attr('src', 'img/phone-contact.png');
    } else {
        $('body').addClass('light-mode');

        document.cookie = "lightMode=true";

        $('.change_mode img').attr('src', 'img/moon.png');
        $('body').css('background', 'url("img/landing_bg_light.png") no-repeat center center');
        $('body').css('background-size', 'cover');
        $('.menu_open img').attr('src', 'img/menu_light.png');
        $('.left_side img').attr('src', 'img/logo_light.png');
        $('.menu_close img').attr('src', 'img/x_light.png');
        
        $('.img_name img').attr('src', 'img/user-contact-light.png');
        $('.img_email img').attr('src', 'img/email-contact-light.png');
        $('.img_phone img').attr('src', 'img/phone-contact-light.png');
    }

});


$(document).ready(function () {
    if (document.cookie == 'lightMode=true') {
        $('body').addClass('light-mode');

        $('.change_mode img').attr('src', 'img/moon.png');
        $('body').css('background', 'url("img/landing_bg_light.png") no-repeat center center');
        $('body').css('background-size', 'cover');
        $('.menu_open img').attr('src', 'img/menu_light.png');
        $('.left_side img').attr('src', 'img/logo_light.png');
        $('.menu_close img').attr('src', 'img/x_light.png');
        
        $('.img_name img').attr('src', 'img/user-contact-light.png');
        $('.img_email img').attr('src', 'img/email-contact-light.png');
        $('.img_phone img').attr('src', 'img/phone-contact-light.png');
    } else {
        $('body').removeClass('light-mode');

        $('.change_mode img').attr('src', 'img/sun.png');
        $('body').css('background', 'url("img/landing_bg_dark.png") no-repeat center center');
        $('body').css('background-size', 'cover');
        $('.menu_open img').attr('src', 'img/menu_dark.png');
        $('.left_side img').attr('src', 'img/logo_dark.png');
        $('.menu_close img').attr('src', 'img/x_dark.png');
        
        $('.img_name img').attr('src', 'img/user-contact.png');
        $('.img_email img').attr('src', 'img/email-contact.png');
        $('.img_phone img').attr('src', 'img/phone-contact.png');
    }
});

I honestly don't understand what is the problem here, I have this script in a separate JS file and have it linked at the end of the page as it should be. I can still change the mode on the server but when I refresh the page it won't load the cookie and automatically goes to the dark mode even I have the light mode activated. Same happens to the preloader I'm using, it works at first, disappears after the page fully loads but the moment I refresh the same page, it won't go away, like the script just gets stuck for some reason. I also have the preloader in the same file as a cookie script, at the top of it, this file is called main.js (where I keep all of the scripts I need for every page). Here's the preloader script

$(document).ready(function () {
    window.onload = function () {
        $('.loader-container').delay(300).fadeOut('slow');
        $('body').css('overflow', 'auto');
    };
});

I honestly have no clue what to do because everything seems to be right for me, please suggest if you have any ideas. Thanks in advance.

Everything looks normal to me but still it's not working, can't find much about this online.

EDIT There are no errors in the console whatsoever.