hawkband-nextjs/components/light_dark.js

import React, { useState } from "react";
import { createTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import { CssBaseline } from "@material-ui/core";
import blue from "@material-ui/core/colors/blue";
import green from "@material-ui/core/colors/green";


const light = createTheme({
  palette: {
    type: "light",
    primary: blue,
    secondary: green,
  },
});

const dark = createTheme({
  palette: {
    type: "dark",
    primary: green,
    secondary: blue,
  },
});
const Theme = ({ children, theme, ...rest }) => 
 (
    <ThemeProvider theme={theme?light:dark}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )

export const withTheme = (Component) => {
  return (props) => {
    const [theme, setTheme] = useState(!Theme);

    const handleChange = (c) => {
      setTheme(c)
    }
    return (
      <Theme theme={theme}>
        <Component {...props} theme={Theme} onThemeChange={setTheme} />
      </Theme>
    );
  };
};