Merge pull request #52 from the-collab-lab/ag-dark-light-mode

Add ThemeContext and toggle theme functionality

src/App.jsx

@@ -8,6 +8,8 @@ import { useShoppingListData, useShoppingLists } from './api';
 
 import { useStateWithStorage } from './utils';
 
+import { ThemeProvider } from './components/ThemeContext';
+
 export function App() {
 	/**
 	 * This custom hook takes the path of a shopping list
@@ -43,32 +45,34 @@ export function App() {
 	const data = useShoppingListData(listPath);
 
 	return (
-		<Router>
-			<Routes>
-				<Route path="/" element={<Layout />}>
-					<Route
-						index
-						element={
-							<Home
-								data={lists}
-								setListPath={setListPath}
-								userId={userId}
-								userEmail={userEmail}
-							/>
-						}
-					/>
-					<Route
-						path="/list"
-						element={<List data={data} listPath={listPath} />}
-					/>
-					<Route
-						path="/manage-list"
-						element={
-							<ManageList listPath={listPath} userId={userId} data={data} />
-						}
-					/>
-				</Route>
-			</Routes>
-		</Router>
+		<ThemeProvider>
+			<Router>
+				<Routes>
+					<Route path="/" element={<Layout />}>
+						<Route
+							index
+							element={
+								<Home
+									data={lists}
+									setListPath={setListPath}
+									userId={userId}
+									userEmail={userEmail}
+								/>
+							}
+						/>
+						<Route
+							path="/list"
+							element={<List data={data} listPath={listPath} />}
+						/>
+						<Route
+							path="/manage-list"
+							element={
+								<ManageList listPath={listPath} userId={userId} data={data} />
+							}
+						/>
+					</Route>
+				</Routes>
+			</Router>
+		</ThemeProvider>
 	);
 }

src/components/NavBar.jsx

@@ -15,9 +15,13 @@ import HomeIcon from '@mui/icons-material/Home';
 import ChecklistIcon from '@mui/icons-material/Checklist';
 import InfoIcon from '@mui/icons-material/Info';
 import Paper from '@mui/material/Paper';
+import { useThemeContext } from './ThemeContext';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import Brightness4Icon from '@mui/icons-material/Brightness4';
 
 export function NavBar() {
 	const { user } = useAuth();
+	const { toggleColorMode, mode } = useThemeContext();
 
 	const [value, setValue] = useState('/');
 
@@ -171,6 +175,14 @@ export function NavBar() {
 							<SignInButton />
 						)}
 					</Box>
+					<IconButton
+						onClick={toggleColorMode}
+						color="inherit"
+						aria-label="toggle theme"
+						edge="end"
+					>
+						{mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+					</IconButton>
 				</Toolbar>
 
 				{/* username and signin/signout button for smaller screens */}

src/components/ThemeContext.jsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, useState } from 'react';
+import {
+	createTheme,
+	ThemeProvider as MUIThemeProvider,
+} from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
+// uses React's Context API to create a global theme state
+const ThemeContext = createContext({
+	// prevent error of attempt to use toggleColorMode without the ThemeProvider properly set up
+	toggleColorMode: () => {},
+});
+// custom hook
+export const useThemeContext = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }) => {
+	// state for theme mode
+	const [mode, setMode] = useState('light');
+	// theme mode toggle function
+	const toggleColorMode = () => {
+		setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+	};
+	// MUI theme creation
+	const theme = createTheme({
+		palette: {
+			mode,
+		},
+	});
+
+	return (
+		// Providing the Context and Theme
+		<ThemeContext.Provider value={{ toggleColorMode }}>
+			<MUIThemeProvider theme={theme}>
+				<CssBaseline />
+				{children}
+			</MUIThemeProvider>
+		</ThemeContext.Provider>
+	);
+};

src/index.css

@@ -1,37 +1,3 @@
-:root {
-	--color-black: hsla(220, 13%, 18%, 1);
-	--color-gray-dark: hsla(220, 13%, 25%, 1);
-	--color-white: hsla(220, 13%, 98%, 1);
-	--color-gray-light: hsla(220, 13%, 94%, 1);
-	--color-emerald-green: hsla(168, 92%, 25%, 1);
-	--color-vermillion-green: hsla(168, 92%, 43%, 1);
-	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
-	--color-pastel-blue: hsla(215, 100%, 73%, 1);
-	--color-red: hsl(0, 68%, 42%);
-
-	--color-accent: var(--color-pastel-blue);
-	--color-bg: var(--color-black);
-	--color-border: hsla(220, 13%, 32%, 1);
-	--color-error: var(--color-red);
-	--color-text: var(--color-white);
-}
-
-@media screen and (prefers-color-scheme: light) {
-	:root {
-		--color-accent: var(--color-cobalt-blue);
-		--color-bg: var(--color-white);
-		--color-border: hsla(220, 13%, 78%, 1);
-		--color-text: var(--color-black);
-	}
-}
-
-:root.theme-light {
-	--color-accent: var(--color-cobalt-blue);
-	--color-bg: var(--color-white);
-	--color-border: hsla(220, 13%, 78%, 1);
-	--color-text: var(--color-black);
-}
-
 *,
 *::after,
 *::before {
@@ -98,13 +64,3 @@ code {
 	font-size: 0.9em;
 	padding: 0.15em 0.15em;
 }
-
-@media screen and (prefers-color-scheme: light) {
-	code {
-		--color-bg: var(--color-gray-light);
-	}
-}
-
-:root.theme-light code {
-	--color-bg: var(--color-gray-light);
-}

src/views/Layout.css

@@ -72,7 +72,7 @@
 	margin: 0 auto;
 	padding-block: 0;
 	padding-block-end: 6.26rem;
-	width: min(72ch, 100%);
+	width: min(140ch, 100%);
 }
 
 @media (600px < width < 900px) {