在暗模式（class）下更改图像，使用Tailwind。

Question

我想在切换到暗模式时更改我的标志图片（我正在使用tailwind上的类）。这有机会实现吗？

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

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>;

- Manuel Nelson

---

请问您能否添加所有的代码？或者最好提供一个仓库链接？ - MarioG8

谢谢 :-) 记住以后！将 .env 添加到 .gitignore 文件中！;-) - MarioG8

你们解决了吗？ - Pathros

Answer 1

你可以使用 display 属性。在 TailwindCSS 中，可以像这样实现：

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

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

- DennisMortensen