Django Login system breaks the javascript

Using Django Templates & Frontend
1

So I am creating a Django application and so far I have a nice template using HTML, CSS, and Javascript, however once I implemented an authentication system the javascript only works when a user is logged in but stops working once they are logged out. Before I implemented the login system, the javascript used localStorage in order to store theme preferences and it worked perfectly but now the javascript only works if a user is currently logged in, so I decided to try to use cookies in order to store a user’s theme preferences but that also only works once user is logged in. I’m not sure how to proceed any help is much appreciated.

Here is the javascript file using localStorage

const body = document.body;
const themeToggleBtn = selectElement('#theme-toggle-btn');
const currentTheme = getCookie('currentTheme');

// Check to see if there is a theme preference in the cookie, if so add the light theme to the body
if (currentTheme) {
    body.classList.add('light-theme');
}

themeToggleBtn.addEventListener('click', function () {
    // Add light theme on click
    body.classList.toggle('light-theme');

    // If the body has the class of light theme then add it to cookie with a longer expiration time, if not remove it
    if (body.classList.contains('light-theme')) {
        setCookie('currentTheme', 'themeActive', 365);
    } else {
        setCookie('currentTheme', '', -1);
    }
});

function setCookie(name, value, days) {
    let expires = '';
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

Here is the modified code using Cookies

// Grab elements
const selectElement = (selector) => {
    const element = document.querySelector(selector);
    if(element) return element;
    throw new Error(`Something went wrong! Make sure that ${selector} exists/is typed correctly.`);  
};

//Nav styles on scroll
const scrollHeader = () => {
    const navbarElement = selectElement('#header');
    if (navbarElement) {
        if (this.scrollY >= 15) {
            navbarElement.classList.add('activated');
        } else {
            navbarElement.classList.remove('activated');
        }
    }
}

window.addEventListener('scroll', scrollHeader);

// Open menu & search pop-up
const menuToggleIcon = selectElement('#menu-toggle-icon');
const formOpenBtn = selectElement('#search-icon');
const formCloseBtn = selectElement('#form-close-btn');
const searchContainer = selectElement('#search-form-container');

const toggleMenu = () => {
    const mobileMenu = selectElement('#menu');
    if (mobileMenu) {
        mobileMenu.classList.toggle('activated');
        menuToggleIcon.classList.toggle('activated');
    }
}

menuToggleIcon.addEventListener('click', toggleMenu);

// Open/Close search form popup
const toggleSearchForm = () => {
    const searchContainer = selectElement('#search-form-container');
    if (searchContainer) {
        searchContainer.classList.toggle('activated');
    }
}

formOpenBtn.addEventListener('click', () => searchContainer.classList.add('activated'));
formCloseBtn.addEventListener('click', () => searchContainer.classList.remove('activated'));
// -- Close the search form popup on ESC keypress
window.addEventListener('keyup', (event) => {
    const searchContainer = selectElement('#search-form-container');
    if (searchContainer && event.key === 'Escape') {
        searchContainer.classList.remove('activated');
    }
});

const body = document.body;
const themeToggleBtn = selectElement('#theme-toggle-btn');
const currentTheme = getCookie('currentTheme');

// Check to see if there is a theme preference in the cookie, if so add the light theme to the body
if (currentTheme) {
    body.classList.add('light-theme');
}

themeToggleBtn.addEventListener('click', function () {
    // Add light theme on click
    body.classList.toggle('light-theme');

    // If the body has the class of light theme then add it to cookie with a longer expiration time, if not remove it
    if (body.classList.contains('light-theme')) {
        setCookie('currentTheme', 'themeActive', 365);
    } else {
        setCookie('currentTheme', '', -1);
    }
});

function setCookie(name, value, days) {
    let expires = '';
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// Swiper
const swiper = new Swiper(".swiper", {
    // How many slides to show
    slidesPerView: 1,
    // How much space between slides
    spaceBetween: 20,
    // Make the next and previous buttons work
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // Make the pagination indicators work
    pagination: {
        el: '.swiper-pagination'
    },
    //Responsive breakpoints for how many slides to show at that view
    breakpoints: {
        // 700px and up shoes 2 slides
        700: {
          slidesPerView: 2
        },
        // 1200px and up shoes 3 slides
        1200: {
            slidesPerView: 3
        }
    }   
});