导航栏按钮无法点击求助：暗黑主题切换与简历按钮失效

问题描述 #

导航栏内按钮无法正常点击、鼠标悬停时光标无变化，同时需要实现暗黑主题切换功能。

一、修复简历按钮点击问题 #

• 移除冗余的<button>标签：HTML中<a>本身可作为链接/下载按钮，外层嵌套<button>会引发事件冲突，直接保留<a>即可。
• 修正文件路径：确保href指向正确的简历文件（如放在public目录下，需写成"/resume.pdf"，替换为实际文件名）。
• 添加光标样式：给<a>的className补充cursor-pointer，解决悬停无光标变化的问题。

修复后的简历按钮代码：

<li>
  <a
    href="/resume.pdf" // 替换为实际简历文件路径
    download={resume}
    className="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded cursor-pointer"
  >
    Resume
  </a>
</li>

二、修复暗黑主题切换功能 #

• 统一事件处理：移除<div>上的onClick={toggleDarkMode}，<input>已绑定onChange={handleCheck}，重复绑定会导致逻辑冲突。
• 确保状态更新逻辑正确：handleCheck需正确切换mode状态，示例逻辑如下：

const [mode, setMode] = useState("light");

const handleCheck = () => {
  const newMode = mode === "dark" ? "light" : "dark";
  setMode(newMode);
  // 可选：将主题存入localStorage，刷新后保留状态
  localStorage.setItem("theme", newMode);
};

• 同步UI状态：保证input的checked属性与mode完全同步（checked={mode === "dark"}）。

修复后的暗黑主题切换代码：

<label className="inline-flex relative items-center mr-5 cursor-pointer">
  <input
    type="checkbox"
    checked={mode === "dark"}
    className="sr-only peer"
    onChange={handleCheck}
  />
  <div
    className="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-green-300 peer-checked:after:translate-x-full
               peer-checked:after:border-white after:content-[''] after:absolute
               after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border 
               after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-600 cursor-pointer"
  ></div>
  <span className="ml-2 text-sm font-medium dark:text-white text-black">
    Dark
  </span>
</label>

三、全局暗黑主题生效补充 #

若页面其他元素需跟随主题变化，需配合Tailwind配置实现：

1. 在tailwind.config.js中启用类模式暗黑主题：

module.exports = {
  darkMode: 'class',
  // 其他配置项...
}

2. 同步根元素类名：

useEffect(() => {
  if (mode === "dark") {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
}, [mode]);

内容的提问来源于stack exchange，提问作者Raju Sharma Dahal