Html – Theme Not Loading on Page Load but Works on Radio Button Selection

I’m purely a beginner and this is for my project in one of my majors. I’m trying to implement a theme-switching feature on one of my subpages (Article1.html) using JavaScript, where users can select themes (Dark Modern, Pink Pastel, Windows XP) via radio buttons in a pop-up menu. The theme should load immediately when the page loads if it was previously saved, but it only loads after selecting a theme from the menu. I can’t see any css and it’s just plain html when I open the index.html (parent page/home).

Expected Behavior: The saved theme should be applied immediately on page load.

Actual Behavior: The theme only loads after selecting a theme from the menu.

Here’s what I have:

1. JavaScript function (setTheme) that changes the CSS file, and header image based on the selected theme.
2. Radio button listeners that call setTheme and save the selection to localStorage when a theme is chosen.
3. Page load function that retrieves the saved theme from localStorage and applies it via setTheme, which I expect to apply the theme immediately on load.

I appreciate any help. Thank you.

Code for HTML:

<!--Control Panel-->
        <div class="controlPanel">
            <button class="arrangement" onclick="openMenu('arrangementMenu')">Arrangement</button>
            <button class="order" onclick="openMenu('orderMenu')">Order</button>
            <button class="themes" onclick="openMenu('themesMenu')">Themes</button>
        </div> <!--controlPanel-->

        <!-- Overlay -->
        <div class="overlay" id="overlay" onclick="closeMenu()"></div>

                <!-- Arrangement Menu -->
                <div id="arrangementMenu" class="popupMenu">
                    <button class="closeBtn" onclick="closeMenu()">X</button>
                    <h3>Arrangement</h3>
                    <hr>
                    <div class="notAvailable">
                        <p>This feature is not available for this page.</p>
                        <p>Go <a href="../index.html">back to home.</a></p> 
                    </div>
                </div> <!-- arrangementMenu -->

                <div id="orderMenu" class="popupMenu">
                    <button class="closeBtn" onclick="closeMenu()">X</button>
                    <h3>Order</h3>
                    <hr>
                    <div class="notAvailable">
                        <p>This feature is not available for this page.</p>
                        <p>Go <a href="../index.html">back to home.</a></p>
                    </div>
                </div>
                <!-- orderMenu -->
                
                <!-- Themes Menu -->
                <div id="themesMenu" class="popupMenu">
                    <button class="closeBtn" onclick="closeMenu()">X</button>
                    <h3>Theme:</h3>
                    <hr>
                    <div class="radio-group">
                        <label><input type="radio" name="theme" value="astyle - dark modern.css" onclick="setTheme('astyle - dark modern.css')">Dark Modern</label>
                        <hr>
                        <label><input type="radio" name="theme" value="astyle - pink pastel.css" onclick="setTheme('astyle - pink pastel.css')">Pink Pastel</label>
                        <hr>
                        <label><input type="radio" name="theme" value="astyle - windows xp.css" onclick="setTheme('astyle - windows xp.css')">Windows XP</label>
                    </div>
                    <button onclick="saveTheme()" class="closeBtn">OK</button>
                </div> <!-- themesMenu -->

Code for Javascript:

// Function to open a menu
function openMenu(menuId) {
    console.log("Opening menu:", menuId);
    document.getElementById("overlay").style.display = "block";
    document.querySelectorAll(".popupMenu").forEach(menu => {
        menu.style.display = "none";
    });
    // Takes the ID of menu and plugs in to this getElementById
    document.getElementById(menuId).style.display = "block";
}

// Function to close a menu
function closeMenu() {
    document.getElementById("overlay").style.display = "none";
    document.querySelectorAll(".popupMenu").forEach(menu => {
        menu.style.display = "none";
    });
}

// Function to switch themes based on radio button selection and save to local storage
function setTheme(sheet) {
    var stylesheet = document.getElementById('articleTheme');
    stylesheet.setAttribute('href', sheet);
    localStorage.setItem('cssTemplate', sheet);

    var header = document.getElementById("header");
    
    if (sheet === "astyle - dark modern.css") {
        header.src = "../images/dark modern header.png";
    } else if (sheet === "astyle - pink pastel.css") {
        header.src = "../images/pink pastel header.gif";
    } else if (sheet === "astyle - windows xp.css") {
        header.src = "../images/windows xp header.gif";
    }    
}

window.addEventListener("load", function() {
    var themeStyle = localStorage.getItem('cssTemplate') || 'astyle - dark modern.css';
    setTheme(themeStyle);
});