Estoy tratando de configurar e imágenes para dos objetos dentro de una variable de tema para que cuando alterno entre el modo claro y oscuro cambie la imagen de fondo del sitio. En este momento, puedo alternar entre temas claros y oscuros y hacer que muestren el color y el color de fondo, pero me gusta que sea una imagen en lugar de un color de fondo.

 import { createContext, useState, useEffect } from "react"; const themes = { dark: { backgroundColor: "black", color: "pink", }, light: { backgroundColor: "white", color: "blue", }, }; export const ThemeContext = createContext(); export const ThemeProvider = ({ children }) => { const [isDark, setIsDark] = useState(false); const toggleTheme = () => { localStorage.setItem("isDark", JSON.stringify(!isDark)); setIsDark(!isDark); }; const theme = isDark ? themes.dark : themes.light; useEffect(() => { const isDark = localStorage.getItem("isDark") === "true"; setIsDark(isDark); }, []); console.log(isDark) return ( <ThemeContext.Provider className="tester1" value={[{ theme, isDark }, toggleTheme]}> {children} </ThemeContext.Provider> ) }

 import { ThemeContext } from "./components/Toggler/Toggler" import { useContext } from "react" const App = () => { const [{ theme, isDark }, toggleTheme] = useContext(ThemeContext); const [load, upadateLoad] = useState(true); useEffect(() => { const timer = setTimeout(() => { upadateLoad(false); }, 2000); return () => clearTimeout(timer); }, []); return ( <> <div className="app" style={{ backgroundColor: theme.backgroundColor, color: theme.color }} > <div className="text">It's a {isDark ? "Dark" : "Light"} theme</div> <button type="button" onClick={toggleTheme}> Toggle theme </button> </div> ) }