DarkModeProvider.js

import React, { createContext, useState } from "react";
import { ThemeProvider } from "styled-components";

export const ThemeContext = createContext({});

const DarkModeProvider = ({ children }) => {
  const [mode, setMode] = useState("light");

  const toggleMode = () => {
    const newMode = mode === "light" ? "dark" : "light";
    setMode(newMode);
  };

  return (
    <ThemeContext.Provider value={{ toggle: toggleMode }}>
      <ThemeProvider theme={{ mode: mode }}>{children}</ThemeProvider>
    </ThemeContext.Provider>
  );
};

export default DarkModeProvider;