stable needs work

components/light_dark.js

@@ -6,7 +6,7 @@ import blue from "@material-ui/core/colors/blue";
 import green from "@material-ui/core/colors/green";
 
 
-const theme = createTheme({
+const light = createTheme({
   palette: {
     type: "light",
     primary: blue,
@@ -14,7 +14,7 @@ const theme = createTheme({
   },
 });
 
-const themeDark = createTheme({
+const dark = createTheme({
   palette: {
     type: "dark",
     primary: green,
@@ -22,23 +22,24 @@ const themeDark = createTheme({
   },
 });
 
-const Theme = (props) => {
-  const { children, darkMode } = props;
-  const defaultTheme = darkMode ? themeDark : theme;
-  return (
-    <ThemeProvider theme={defaultTheme}>
+const Theme = ({ children, theme, ...rest }) => 
+ (
+    <ThemeProvider theme={theme}>
       <CssBaseline />
       {children}
     </ThemeProvider>
-  );
-};
+  )
 
 export const withTheme = (Component) => {
   return (props) => {
-    const [darkMode, setDarkMode] = useState(false);
+    const [theme, setTheme] = useState();
+
+    const handleChange = (c) => {
+      setDarkMode(c)
+    }
     return (
-      <Theme darkMode={darkMode}>
-        <Component {...props} darkMode={darkMode} setDarkMode={setDarkMode} />
+      <Theme theme={theme}>
+        <Component {...props} theme={theme} onThemeChange={setDarkMode} />
       </Theme>
     );
   };