ThemeProvider.jsx

import PropTypes from "prop-types";
import React, { createContext, useMemo, useState } from "react";
import { useReduxDevtools } from "./ReduxDevtoolProvider";

export const ThemeContext = createContext({ actions: {}, values: {} });

const ThemeProvider = ({ children }) => {
  const [theme, setLocalTheme] = useState("light");

  const setTheme = useReduxDevtools(setLocalTheme, "setTheme");

  const value = useMemo(
    () => ({
      actions: { setTheme },
      values: { theme }
    }),
    [theme, setTheme]
  );

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
};

ThemeProvider.propTypes = {
  children: PropTypes.node.isRequired
};

export default ThemeProvider;