React+Tailwind暗黑模式切换正常但LocalStorage失效求助

问题原因 #

1. LocalStorage存储键名错误：你在localStorage.setItem中传入了setIsDark（React状态更新函数）作为存储键名，但LocalStorage要求键名必须是字符串，这直接导致状态无法被正确存储。
2. 初始化未读取缓存：组件挂载时没有从LocalStorage读取之前保存的模式状态，每次刷新页面都会回到默认的isDark=true状态。

修复代码（不改动原有切换核心逻辑） #

仅需修改两处代码，即可在保留原有切换逻辑的前提下解决问题：

// 初始化时优先读取LocalStorage缓存，无缓存则用默认值true
const [isDark, setIsDark] = useState(() => {
  const savedTheme = localStorage.getItem('theme_mode');
  // 匹配现有逻辑：isDark=true对应light模式
  return savedTheme ? savedTheme === 'light' : true;
});

useEffect(() => {
    if (isDark) {
      document.body.classList.remove('dark');
      // 改用字符串作为LocalStorage键名
      localStorage.setItem('theme_mode', 'light');
      document.body.classList.add('light');
    } else {
      document.body.classList.remove('light');
      document.body.classList.add('dark');
      localStorage.setItem('theme_mode', 'dark');
    }
}, [isDark]); 

说明 #

• 使用theme_mode字符串作为LocalStorage键名，替换原本的setIsDark函数，确保状态能被正确存储和读取。
• 初始化state时采用函数式写法，避免每次渲染重复读取LocalStorage，同时保证组件挂载时自动恢复之前的模式状态。
• 完全保留了你原本的isDark与light/dark类的对应逻辑，未改动核心切换逻辑。

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