Как обновить изображение при применении темного режима

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

Я использую хук useDarkMode от donavon, но у меня возникли проблемы с логотипом, который следует обновить.

 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;
  

Кто-нибудь имеет представление?

Ответ №1:

useDarkMode возвращает объект, а не текущий режим, чтобы получить доступ к текущему значению, которое вам нужно использовать darkmode.value .

В вашем случае: src={darkMode.value === "true" ? logo_font_darkMode : logo_font_lightMode}