Consistent dark and light theme throughout app

src/Context.jsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+export const Context = React.createContext();
+export const ContextProvider = ({ children }) => {
+	const [darkMode, setDarkMode] = useState(false);
+
+	return (
+		<Context.Provider value={{ darkMode, setDarkMode }}>
+			{children}
+		</Context.Provider>
+	);
+};

src/index.jsx

@@ -1,12 +1,12 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
-
+import { ContextProvider } from './Context';
 import './index.css';
 
 const root = createRoot(document.getElementById('root'));
 root.render(
-	<StrictMode>
+	<ContextProvider>
 		<App />
-	</StrictMode>,
+	</ContextProvider>,
 );

src/views/Layout.jsx

@@ -1,9 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { useState } from 'react';
+import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
-import './Layout.css';
 import { Toaster } from 'react-hot-toast';
 import { NavBar } from '@/components/NavBar';
+import { Context } from '../Context';
+import './Layout.css';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -14,7 +15,7 @@ import { NavBar } from '@/components/NavBar';
  */
 
 export function Layout() {
-	const [darkMode, setDarkMode] = useState(false);
+	const { darkMode, setDarkMode } = useContext(Context);
 
 	const toggleDarkMode = () => {
 		setDarkMode(!darkMode);
@@ -26,7 +27,8 @@ export function Layout() {
 				<div className="Layout text-black dark:text-white bg-white dark:bg-black">
 					<NavBar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
 
-					<main className="mx-auto px-8 md:px-8 lg:px-20 w-full max-w-screen-sm min-h-screen flex flex-col">
+					<main className="mx-auto px-8 md:px-8 lg:px-20 w-full max-w-screen-sm min-h-screen flex flex-col rounded-xl pt-20">
+						{/* I have add rounded and padding classes here for the background container that we could add to break up the design from being too white */}
 						<Outlet />
 					</main>
 

src/views/Login.css

@@ -0,0 +1,9 @@
+.dark {
+	background-color: #1f1e26;
+	color: #ffffff;
+}
+
+.false {
+	background-color: #ffffff;
+	color: #1f1e26;
+}

src/views/Login.jsx

@@ -1,8 +1,13 @@
 import { useAuth } from '../api/useAuth';
-import { useEffect } from 'react';
+import { useEffect, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Eclipse, Sun } from 'lucide-react';
+import { Context } from '../Context';
+import './Login.css';
 
 function Login() {
+	const { darkMode, setDarkMode } = useContext(Context);
 	const { user, signIn } = useAuth();
 	const navigate = useNavigate();
 
@@ -12,11 +17,21 @@ function Login() {
 		}
 	}, [user]);
 
+	const toggleDarkMode = () => {
+		setDarkMode(!darkMode);
+	};
+
 	return (
-		<div className="flex justify-center items-center h-screen">
-			<div className="bg-black text-white rounded-xl w-11/12 max-w-lg p-8 shadow-xl">
+		<div
+			className={`${darkMode && 'dark'} flex justify-center items-center h-screen`}
+		>
+			<div className="bg-transparent text-white  w-11/12 max-w-lg p-8 ">
 				<div className="flex justify-center items-center mb-6">
-					<img src="grocerease-light.png" alt="Shopping app logo" />
+					{darkMode ? (
+						<img src="grocerease-light.png" alt="Shopping app logo" />
+					) : (
+						<img src="grocerease.png" alt="Shopping app logo" />
+					)}
 				</div>
 				<div className="flex justify-center items-center h-2/5">
 					<div className="flex justify-center items-center bg-pink-500 hover:bg-pink-500 hover:bg-opacity-80 w-2/4 h-1/4 rounded-xl p-2">
@@ -26,6 +41,18 @@ function Login() {
 					</div>
 				</div>
 			</div>
+			<Button
+				onClick={toggleDarkMode}
+				className="fixed w-16 bottom-16 right-16 p-2 rounded-full text-primary-pink hover:text-primary-pink hover:text-opacity-60 font-semibold"
+			>
+				<abbr title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
+					<button
+						className={`${darkMode && 'dark'} rounded-full text-primary-pink hover:text-opacity-60`}
+					>
+						{darkMode ? <Eclipse /> : <Sun />}
+					</button>
+				</abbr>
+			</Button>
 		</div>
 	);
 }