更改深色模式（类）顺风的图像

Question

当我切换到黑暗模式时，我想更改我的徽标图像（我在顺风上使用类）。有机会成功吗？

这是我用来更改主题的钩子：

const useTheme = () => {
  const [theme, setTheme] = useState(localStorage.theme);
  const nextTheme = theme === "light" ? "dark" : "light";

  useEffect(() => {
    const rootElement = window.document.documentElement;
    rootElement.classList.remove(nextTheme);
    rootElement.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme, nextTheme]);

  return [nextTheme, setTheme];
};

这是我想要改变的形象（如果有帮助的话）：

<div className="flex flex-col">
  <Link
    to="/"
    className="flex px-5 gap-2 my-6 pt-1 w-190 items-center"
    onClick={handleCloseSideBar}
  >
    <img src="/img/logo.png" alt="logo" className="w-full" />
  </Link>
</div>;

Answer 1

您可以只使用显示属性。TailwindCSS 中是这样的：

<img class="block dark:hidden" src="./img/logolight.png">
<img class="hidden dark:block" src="./img/logodark.png">

如果您想要一个实时示例来检查，我在我们的 docs.launchbrightly.com 网站上也做了同样的事情:-)