多HTML项目主题切换仅单页生效的问题分析及全局实现方案

Got it, let's tackle this theme synchronization issue you're facing. The main problems right now are:

• Your theme toggle script only runs on themes.html, so other pages never get the signal to switch themes.
• There's no persistence for the user's theme choice—when they navigate to another page, the browser resets to the default theme.

Here's a straightforward solution to fix both issues:

Step 1: Update the Script to Persist Theme Choices #

We'll use localStorage to save the user's selected theme, and make sure every page checks this storage on load to apply the correct theme. Replace your existing script.js with this:

// Apply saved theme when the page finishes loading
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('selectedTheme');
  if (savedTheme) {
    document.body.className = savedTheme;
  }
});

// Handle Dracula theme toggle
document.querySelector('.dracula_theme')?.addEventListener('click', () => {
  document.body.className = 'dracula';
  localStorage.setItem('selectedTheme', 'dracula');
});

// Handle default theme toggle
document.querySelector('.default')?.addEventListener('click', () => {
  document.body.className = '';
  localStorage.setItem('selectedTheme', '');
});

What this does: #

• DOMContentLoaded ensures we don't try to modify the DOM before it's fully loaded.
• localStorage stores the theme choice in the user's browser, so it persists even when they close and reopen the site.
• The ?. optional chain operator prevents errors if a page doesn't have the theme toggle buttons (like index.html or about_us.html).

Step 2: Include the Script and Stylesheet in All Pages #

Make sure every HTML file (index.html, about_us.html, themes.html, etc.) includes these two lines:

1. Add the stylesheet link in the <head> section:

<link rel="stylesheet" href="themes.css">

2. Add the script right before the closing </body> tag:

<script src="script.js"></script>

This way, every page loads the theme styles and runs the script that checks for the saved theme.

Step 3: Test It Out #

Now when you switch themes on themes.html, the choice is saved to localStorage. Navigate to any other page, and it will automatically apply the saved theme class to the <body> element—syncing the theme across all your pages.

Optional: Clean Up the Toggle Logic #

If you want to make the code a bit cleaner, you can refactor the toggle functions to reuse logic:

function setTheme(themeName) {
  document.body.className = themeName;
  localStorage.setItem('selectedTheme', themeName);
}

document.addEventListener('DOMContentLoaded', () => {
  setTheme(localStorage.getItem('selectedTheme') || '');
});

document.querySelector('.dracula_theme')?.addEventListener('click', () => setTheme('dracula'));
document.querySelector('.default')?.addEventListener('click', () => setTheme(''));

This reduces repetition and makes it easier to add more themes later.

内容的提问来源于stack exchange，提问作者user15300242