Тема не загружается при загрузке страницы, но работает при выборе переключателя ⇐ CSS

[Anonymous]

Я новичок, и это мой проект по одной из моих специальностей. Я пытаюсь реализовать функцию переключения тем на одной из моих подстраниц (Article1.html) с использованием JavaScript, где пользователи могут выбирать темы (Dark Modern, Pink Pastel, Windows XP) с помощью переключателей во всплывающем меню. Тема должна загружаться сразу при загрузке страницы, если она была ранее сохранена, но она загружается только после выбора темы из меню. Я не вижу никакого CSS, и это просто HTML, когда я открываю index.html (родительскую страницу/домашнюю страницу).
Ожидаемое поведение: сохраненная тема должна применяться немедленно при загрузке страницы. .
Фактическое поведение: тема загружается только после выбора темы из меню.
Вот что у меня есть:

• Функция JavaScript (setTheme), который изменяет файл CSS и изображение заголовка в зависимости от выбранной темы.
• Прослушиватели переключателей, которые вызывают setTheme и сохраняют выбор в localStorage > когда выбрана тема.
• Функция загрузки страницы, которая извлекает сохраненную тему из localStorage и применяет ее через setTheme, что, как я ожидаю, немедленно применит тему при загрузке.

Я ценю любую помощь. Спасибо.
Код для HTML:


Arrangement
Order
Themes






X
Arrangement


This feature is not available for this page.
Go back to home.



X
Order


This feature is not available for this page.
Go back to home.






X
Theme:


Dark Modern

Pink Pastel

Windows XP

OK


Код для 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);
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... -selection