adds themecontext with theme toggler in topbar (includes localstorage for persistent theme)

Author: Emile Frey

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, useContext } from 'react';
+import React, { Dispatch, useContext, useState } from 'react';
 import Router from './routes/Router';
 import Layout from './components/Layout/Layout';
 import { connect } from 'react-redux';
@@ -9,6 +9,7 @@ import { theme } from './Theme'
 import { AlertContext } from './contexts/AlertContext';
 import Alert from '@material-ui/lab/Alert';
 import { AxiosError } from './interfaces/axios/AxiosError'
+import { ThemeContext } from './contexts/ThemeContext';
 
 
 
@@ -31,15 +32,17 @@ export interface AppProps extends AuthProps, PrivateRouteProps { }
 function App(props: AppProps) {
 
   const { alertType, openAlert, alertMessage, handleAlertClose } = useContext(AlertContext);
+  const { darkMode } = useContext(ThemeContext);
+  const palletType = darkMode ? "dark" : "light"
 
   React.useEffect(() => {
     props.setAuthenticatedIfRequired();
   }, [props]);
 
   return (
     <div className="App">
-      <ThemeProvider theme={theme}>
-        <Layout {...props}>
+      <ThemeProvider theme={theme(palletType)}>
+        <Layout {...props} >
           <Router {...props} />
         </Layout>
         <Snackbar id="appAlertSnackbar" open={openAlert} autoHideDuration={6000} onClose={handleAlertClose}>

frontend/src/Theme.tsx

@@ -1,7 +1,8 @@
 import { createMuiTheme } from '@material-ui/core/styles';
 
-export const theme = createMuiTheme({
+export const theme = (type: "dark" | "light") => createMuiTheme({
   palette: {
+    type: type,
     primary: {
       main: '#1976d2',
       light: '#63a4ff',

frontend/src/components/Home.tsx

@@ -21,7 +21,6 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
     padding: theme.spacing(2), paddingLeft: theme.spacing(4),
-    color: theme.palette.primary.main,
     fontWeight: 700
   },
   textInput: {
@@ -140,7 +139,7 @@ function Home(props: AuthProps) {
         <Grid container spacing={3}>
           <Grid item xs={6}>
             <Paper className={classes.textInput}>
-              <Typography variant="h6" color="primary">
+              <Typography variant="h6">
                 Enter your name:
               </Typography>
               <TextField

frontend/src/components/Layout/TopBar.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { AppBar, Toolbar, Typography } from '@material-ui/core';
+import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
 import { APP_NAME } from '../../settings'
-import { AppProps } from '../../App'
 import { AccountCircle } from '@material-ui/icons';
 import MenuItem from '@material-ui/core/MenuItem';
 import DropdownMenu from '../Layout/DropdownMenu';
-
+import Brightness7Icon from '@material-ui/icons/Brightness7';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
+import { ThemeContext } from '../../contexts/ThemeContext';
+import { AppProps } from '../../App';
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
@@ -21,13 +23,17 @@ const useStyles = makeStyles((theme) => ({
 
 export default function TopBar(props: AppProps) {
   const classes = useStyles();
-
+  const { darkMode, setDarkMode } = useContext(ThemeContext);
+  
   return (
     <AppBar position="relative">
       <Toolbar className={props.isAuthenticated ? classes.authToolbar : undefined}>
         <Typography variant="h5" align="center" className={classes.title}>
           {APP_NAME}
         </Typography>
+        <IconButton color="inherit" onClick={() => setDarkMode(!darkMode)} >
+        {darkMode ? <Brightness4Icon/> : <Brightness7Icon />}
+        </IconButton>
         {props.isAuthenticated && (
           <DropdownMenu dropdownButtonIcon={<AccountCircle />}>
             <div>

frontend/src/contexts/ThemeContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useState, useReducer, useEffect } from 'react';
+
+export type ThemeContextProps = {
+  darkMode: boolean
+  setDarkMode: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  darkMode: false,
+  setDarkMode: () => { }
+});
+
+
+let localState = false
+const storedThemeState = localStorage.getItem("darkMode");
+if (typeof storedThemeState === 'string') {
+  localState = JSON.parse(storedThemeState)
+}
+
+const ThemeContextProvider = (props: any) => {
+
+  const [darkMode, setDarkMode] = useState<boolean>(localState)
+
+  useEffect(() => {
+    localStorage.setItem("darkMode", JSON.stringify(darkMode));
+  }, [darkMode]);
+
+  return (
+    <ThemeContext.Provider value={{
+      darkMode,
+      setDarkMode
+    }}>
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+
+export default ThemeContextProvider;

frontend/src/index.js

@@ -8,6 +8,7 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import authReducer from './auth/authReducer';
 import AlertContextProvider from './contexts/AlertContext'
+import ThemeContextProvider from './contexts/ThemeContext'
 import { BrowserRouter } from 'react-router-dom';
 
 const reducer = combineReducers({ auth: authReducer }); // Using Combine Reducers here although only one reducer is present.
@@ -21,9 +22,11 @@ ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
       <AlertContextProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
+        <ThemeContextProvider>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </ThemeContextProvider>
       </AlertContextProvider>
     </Provider>
   </React.StrictMode>,