Im trying to set and images to two objects within a theme variable so that when I toggle between light and dark mode it changes the background image for the site. Right now I can toggle betwen light and dark themes and get them to display the background color and color but id like this to be an iamge instead of background color.

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>
)
}