I have a total of like 5 index.html files. They all have different index names and are linked to one JS file. When I click the button to change the theme of the index.html page. The theme changes to light theme and set in localStorage. The other pages are not changed. Can someone get me in the right direction. What am I doing wrong?
// Switch theme/add to local storage to all body elements in multiple .html files
const bodyElement = document.body
// Get the theme button via id
const themeToggleBtn = selectElement('#theme-toggle-btn');
// passes the theme button to the toggleTheme function
const currentTheme = localStorage.getItem('currentTheme');
// checks if there is a current theme in local storage
if (currentTheme) {
bodyElement.classList.add('light-theme');
}
// event listener btn is clicked the body element changes theme
themeToggleBtn.addEventListener('click', () => {
bodyElement.classList.toggle('light-theme');
// checks if element has the class and sets it in local storage
if (bodyElement.classList.contains('light-theme')) {
localStorage.setItem('currentTheme', 'themeActive');
// if not it removes it
} else {
localStorage.removeItem('currentTheme');
}
}); <script src="./assets/js/main.js"></script>