如何在应用暗模式时更新图像

Question

我正在使用donavon的useDarkMode钩子，但我的徽标有问题，应该更新。

import React, { useEffect, useState } from "react";
import useDarkMode from "use-dark-mode";

import logo_bird from "./images/green_bird.png";
import logo_font_lightMode from "./images/logo_font_black.png";
import logo_font_darkMode from "./images/logo_font_white.png";

function Navigation() {
  const darkMode = useDarkMode(false);
  return (
    <div className="nav">
      <img src={logo_bird} alt="logo_bird" />
      <img
        src={darkMode === "true" ? logo_font_darkMode : logo_font_lightMode}
        alt="logo_font"
      />
      <button onClick={darkMode.toggle}> switch </button>
    </div>
  );
}

export default Navigation;

有谁有线索吗？

Answer 1

为了访问使用darkmode.value所需的当前值，useDarkMode返回一个对象，而不是当前模式。

在您的例子中：src={darkMode.value === "true" ? logo_font_darkMode : logo_font_lightMode}