Merge pull request #61 from the-collab-lab/light/dark

Dark/Light Mode Feature
the-collab-lab · Oct 10, 2024 · df5ac85 · df5ac85
2 parents 4920011 + 45ef3fd
commit df5ac85
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/src/views/LandingPage.jsx b/src/views/LandingPage.jsx
@@ -2,21 +2,21 @@ import logo from '../assets/logo.png';
 
 export function LandingPage() {
 	return (
-		<div className="flex flex-col items-center justify-center min-h-screen bg-bgPrimary p-6">
+		<div className="flex flex-col items-center justify-center min-h-screen bg-bgPrimary dark:bg-bgPrimaryDark p-6">
 			<img
 				src={logo}
 				alt="CollabShop Logo, a collaboration platform for grocery shopping."
 				className="w-45 h-auto mb-6"
 			/>
-			<h1 className="text-txtPrimary text-2xl md:text-4xl font-bold text-center mb-4">
+			<h1 className="text-txtPrimary dark:text-txtPrimaryDark text-2xl md:text-4xl font-bold text-center mb-4">
 				<strong>CollabShop</strong> is more than just a grocery app—it&apos;s a
 				tool that embodies the spirit of teamwork and collaboration. Created by
 				early-career developers from{' '}
 				<a
 					href="https://the-collab-lab.codes/"
 					target="_blank"
 					rel="noopener noreferrer"
-					className="text-txtPrimary font-bold underline hover:text-[#1A759F] transition duration-300"
+					className="text-txtPrimary dark:text-txtPrimaryDark font-bold underline hover:text-[#1A759F] transition duration-300"
 				>
 					<strong>The Collab Lab</strong>
 				</a>
@@ -25,7 +25,7 @@ export function LandingPage() {
 				effortlessly share and collaborate on lists. With CollabShop, planning
 				your grocery trips becomes a seamless and enjoyable experience!
 			</h1>
-			<p className="text-txtPrimary font-bold text-lg md:text-xl text-center mb-6">
+			<p className="text-txtPrimary dark:text-txtPrimaryDark font-bold text-lg md:text-xl text-center mb-6">
 				Ready to start your journey? Click the sign-in button below to begin
 				planning your grocery runs with CollabShop today.
 			</p>

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -5,11 +5,14 @@ import {
 	FaSignOutAlt,
 	FaInfoCircle,
 	FaCartPlus,
+	FaMoon,
+	FaSun,
 } from 'react-icons/fa';
 import { IconButton } from '../components/IconButton';
 import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
 import logo from '../assets/logo.png';
+import { useEffect } from 'react';
 //import './Layout.css';
 
 /**
@@ -22,21 +25,52 @@ import logo from '../assets/logo.png';
 
 export function Layout() {
 	const { user } = useAuth();
+
+	//Toggle dark/light mode
+	const toggleTheme = () => {
+		const currentTheme = localStorage.getItem('theme') || 'light';
+		const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+		//Toggle the dark class on the html element
+		document.documentElement.classList.toggle('dark', newTheme === 'dark');
+		localStorage.setItem('theme', newTheme);
+	};
+
+	// Set the theme on initial load
+	useEffect(() => {
+		const savedTheme = localStorage.getItem('theme') || 'light';
+		document.documentElement.classList.toggle('dark', savedTheme === 'dark');
+	}, []);
 	return (
 		<>
 			<div className="flex flex-col min-h-screen">
-				<header className="bg-[var(--color-bg)] pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
+				<header className="bg-bgPrimary dark:bg-bgPrimaryDark pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
 					{!!user && (
 						<div>
 							<img src={logo} alt="Logo" className="mx-auto" />
-							<span>Signed in as {auth.currentUser.displayName}</span>
+							<span className="text-txtPrimary dark:text-txtPrimaryDark">
+								Signed in as {auth.currentUser.displayName}
+							</span>
 						</div>
 					)}
+
+					{/* Theme toggle button */}
+					<button
+						onClick={toggleTheme}
+						className="mt-2 p-2 bg-gray-200 dark:bg-gray-800 rounded"
+						aria-label="Toggle Dark Mode"
+					>
+						{document.documentElement.classList.contains('dark') ? (
+							<FaSun className="text-yellow-500" />
+						) : (
+							<FaMoon className="text-blue-500" />
+						)}
+					</button>
 				</header>
-				<main className="p-0 pb-[6.26rem] w-[min(72ch,100%)] mx-auto">
+				<main className="bg-bgPrimary dark:bg-bgPrimaryDark text-txtPrimary dark:text-txtPrimaryDark p-0 pb-[6.26rem] w-[min(72ch,100%)] mx-auto">
 					<Outlet />
 				</main>
-				<nav className="bg-[var(--color-bg)] border-t border-[var(--color-border)] bottom-0 flex flex-row pb-[max(env(safe-area-inset-bottom),1rem)] pt-4 justify-center fixed w-full">
+				<nav className="bg-bgSecondary dark:bg-bgSecondayDark border-t border-[var(--color-border)] bottom-0 flex flex-row pb-[max(env(safe-area-inset-bottom),1rem)] pt-4 justify-center fixed w-full">
 					<div className="flex flex-row justify-evenly w-[min(72ch,100%)]">
 						{user ? (
 							<>
@@ -51,7 +85,6 @@ export function Layout() {
 									aria-label="Add Item"
 									as={NavLink}
 									IconComponent={FaCartPlus}
-									//className
 									label="Add Item"
 									to="/add-item"
 								/>

diff --git a/src/views/Team.jsx b/src/views/Team.jsx
@@ -80,7 +80,7 @@ export function Team() {
 	}
 
 	return (
-		<div className="bg-bgPrimary p-10 text-center">
+		<div className="bg-bgPrimary dark:bg-bgPrimaryDark p-10 text-center text-txtPrimary dark:text-txtPrimaryDark">
 			<h1 className="mb-5 text-txtPrimary text-4xl font-bold">
 				Meet the Team Behind CollabShop
 			</h1>
@@ -94,7 +94,7 @@ export function Team() {
 				{developers.map((dev, index) => (
 					<div
 						key={index}
-						className="bg-[#168AAD] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
+						className="bg-[#168AAD] dark:bg-[#1D1D1D] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
 					>
 						<img
 							src={dev.photo}
@@ -140,7 +140,7 @@ export function Team() {
 				{mentors.map((mentor, index) => (
 					<div
 						key={index}
-						className="bg-[#168AAD] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
+						className="bg-[#168AAD] dark:bg-[#1D1D1D] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
 					>
 						<img
 							src={mentor.photo}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,jsx}'],
+	darkMode: 'class', // Enable dark mode using the class strategy
 	theme: {
 		extend: {
 			colors: {
@@ -9,6 +10,11 @@ export default {
 				bgSecondary: '#34A0A4', // Accent color for NavBar
 				txtPrimary: '#184E77', // Primary color Text
 				txtSecondary: '#34A0A4', // Secondary color Text
+				//Dark mode colors
+				bgPrimaryDark: '#1D1D1D', // Dark background color
+				bgSecondaryDark: '#2C2C2C', // Dark secondary color
+				txtPrimaryDark: '#FFFFFF', // Light text color
+				txtSecondaryDark: '#A0A0A0', // Secondary light text color
 			},
 			backgroundImage: {
 				'radio-gradient':