Added Theme Provider to contain the theme context

src/components/Header.js

@@ -1,22 +1,32 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   AppBar,
   Toolbar,
   Typography,
   makeStyles,
   Link,
+  IconButton
 } from "@material-ui/core";
 import { HeadsetTwoTone } from "@material-ui/icons";
+import Brightness3Icon from '@material-ui/icons/Brightness3';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
+import {GlobalThemeContext} from "./ThemeProvider";
 // Got access to theme as well
 const useStyles = makeStyles((theme) => ({
   heading: {
     marginLeft: theme.spacing(2),
   },
+  themeIcon: {
+    position: 'absolute',
+    right: 30,
+  }
 }));
 
 function Header() {
   //Styles can be used as hooks.
   const classes = useStyles();
+  //const [Theme, setTheme] = React.useState('dark')
+  const {GlobalTheme, setGlobalTheme} = useContext(GlobalThemeContext)
 
   return (
     <AppBar color="secondary" position="fixed">
@@ -33,6 +43,16 @@ function Header() {
             A-POP
           </Link>
         </Typography>
+        <div className={classes.themeIcon}>
+          {/* {Theme === 'dark' ? 
+          <Brightness7Icon type="button" onClick={() => setTheme('light')} /> :
+          <Brightness3Icon type="button" onClick={() => setTheme('dark')} />} */}
+          <IconButton>
+            {GlobalTheme === 'dark' ? 
+            <Brightness7Icon onClick={() => setGlobalTheme('light')} /> :
+            <Brightness3Icon onClick={() => setGlobalTheme('dark')} />}
+          </IconButton>
+        </div>
       </Toolbar>
     </AppBar>
   );

src/components/ThemeProvider.js

@@ -0,0 +1,20 @@
+import React, { useState, createContext, useMemo } from 'react'
+
+export const GlobalThemeContext = createContext()
+
+const GlobalThemeContextProvider = (props) => {
+  const [GlobalTheme, setGlobalTheme] = useState('dark')
+
+  const value = useMemo(() => ({
+    GlobalTheme,
+    setGlobalTheme
+  }), [GlobalTheme])
+
+  return (
+    <GlobalThemeContext.Provider value={value}>
+        {props.children}
+    </GlobalThemeContext.Provider>
+  )
+}
+
+export default GlobalThemeContextProvider

src/index.js

@@ -2,17 +2,20 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import { MuiThemeProvider, CssBaseline } from "@material-ui/core";
+import GlobalThemeContextProvider from "./components/ThemeProvider";
 import theme from "./theme";
 import { ApolloProvider } from "@apollo/react-hooks";
 import client from "./graphql/client";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <MuiThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </MuiThemeProvider>
+    <GlobalThemeContextProvider>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        <App />
+      </MuiThemeProvider>
+    </GlobalThemeContextProvider>
   </ApolloProvider>,
   document.getElementById("root")
 );