技术求助：将prefers-color-scheme集成至现有暗色模式设置，实现系统自动切换与手动切换兼容

Perfect, let's adjust your existing code to support both automatic system theme detection and manual user overrides. Here's the updated implementation with clear explanations:

Updated JavaScript Code #

const switcher = document.querySelector('#switcher');
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
  // Update switcher image based on current theme
  const src = theme === 'light' ? 'DARK-MODE-1.png' : 'LIGHT-MODE-1.png';
  switcher.setAttribute('src', src);
  // Sync checkbox state to match active theme
  toggleSwitch.checked = theme === 'dark';
}

// Determine initial theme: user's saved choice > system preference > default light
function getInitialTheme() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) return savedTheme;
  
  // Check user's system color scheme setting
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

// Set initial theme on page load
const initialTheme = getInitialTheme();
setTheme(initialTheme);

// Handle manual theme toggle
toggleSwitch.addEventListener('change', (e) => {
  const newTheme = e.currentTarget.checked ? 'dark' : 'light';
  setTheme(newTheme);
});

// Listen for system theme changes (only apply if user hasn't set a manual preference)
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  const savedTheme = localStorage.getItem('theme');
  if (!savedTheme) {
    const systemTheme = e.matches ? 'dark' : 'light';
    setTheme(systemTheme);
  }
});

Key Improvements & Explanations #

• Theme Priority Logic: We prioritize the user's manually saved theme (stored in localStorage) over the system's default preference. If neither exists, we fall back to light mode.
• Checkbox Sync: The setTheme function now updates the toggle checkbox's state to match the active theme, so the UI always reflects the current mode.
• System Theme Listening: We add a listener for changes to the system's color scheme. This only triggers if the user hasn't saved a manual theme choice—once they toggle manually, their selection persists even if the system theme changes.
• Cleaner Image Path: Removed the hardcoded domain from the image path (adjust back if your images are hosted on an external server).

Your HTML Remains Unchanged #

<label class="theme-switch" for="checkbox">
  <span title="Click to enable/disable Dark Mode">
    <img id="switcher" src="">
  </span>
  <input type="checkbox" id="checkbox"/>
</label>

This setup gives users the best experience: automatic alignment with their system settings, plus the flexibility to override and retain their preferred theme.

内容的提问来源于stack exchange，提问作者KA.MVP