Implements #322: Add dark mode to all pages and toggle switch to navbar

frontend/package.json

@@ -26,7 +26,7 @@
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-intersection-observer": "^9.13.0",
     "react-lazy-load-image-component": "^1.6.2",
     "react-pageflip": "^2.0.3",

frontend/src/App.jsx

@@ -5,7 +5,6 @@ import Footer from '../src/components/Shared/Footer';
 import { Outlet } from 'react-router-dom';
 import BackToTopButton from './components/Shared/BackToTopButton';
 import Preloader from './components/Preloader';
-import ThemeToggle from './components/ThemeToggle';
 
 
 function App() {
@@ -16,7 +15,7 @@ function App() {
       <Navbar />
       <Outlet />
       <Footer />
-      <ThemeToggle />
+
 
     </>
   );

frontend/src/components/Pages/Boardgame.jsx

@@ -213,7 +213,7 @@ function Boardgame() {
 
   return (
     <>
-      <div className="w-full mt-10 md:mt-0">
+      <div className="w-full mt-10 md:mt-0 dark:bg-black dark:text-white">
         <section className="w-full pt-12 md:pt-24 lg:pt-32">
           <div className="container mx-auto space-y-10 xl:space-y-16">
             <div className="flex flex-col items-center space-y-4 text-center">
@@ -286,9 +286,9 @@ function Boardgame() {
             {boards.map((board, index) => (
               <div
                 key={index}
-                className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-white"
+                className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-amber-100 dark:bg-amber-800"
               >
-                <div className="relative overflow-hidden">
+                <div className="relative overflow-hidden dark:bg-amber-800">
                   <img
                     src={board.src}
                     alt={board.title}
@@ -298,7 +298,7 @@ function Boardgame() {
                     className="object-cover w-full h-48 transition-all duration-300 ease-in-out group-hover:h-32"
                     style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
                   />
-                  <div className="p-4 bg-background transition-transform duration-300 ease-in-out transform translate-y-0 group-hover:translate-y-4">
+                  <div className="p-4 bg-background transition-transform duration-300 ease-in-out transform translate-y-0 group-hover:translate-y-4 dark:bg-amber-800">
                     <h3 className="text-xl font-bold">{board.title}</h3>
                     <p className="text-sm text-muted-foreground">
                       {board.description}
@@ -315,7 +315,7 @@ function Boardgame() {
             ))}
           </div>
         </section>
-        <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
+        <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-black">
           <div className="container mx-auto px-4 md:px-6 text-center">
             <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl mb-4">
               Subscribe to our Newsletter
@@ -349,7 +349,7 @@ function Boardgame() {
         {/* Modal for instructions */}
         {selectedBoard && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-            <div className="bg-white p-8 rounded-lg max-w-md mx-auto shadow-lg relative">
+            <div className="bg-amber-100 p-8 rounded-lg max-w-md mx-auto shadow-lg relative">
               <h2 className="text-2xl font-bold mb-4">
                 {selectedBoard.title} Instructions
               </h2>

frontend/src/components/Pages/Event.jsx

@@ -117,7 +117,7 @@ function Event() {
 
   return (
     <>
-      <div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">
+      <div id="event" className="w-full h-fit bg-amber-100 dark:bg-black md:overflow-hidden ">
         <section className="w-full h-full py-12 md:py-24 lg:py-32 bg-muted flex justify-center md:overflow-hidden ">
           <div className="container relative items-center justify-center gap-4 px-4 text-center md:px-6">
             <div className="space-y-4">
@@ -130,7 +130,7 @@ function Event() {
               <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
                 Upcoming Events and much more....
               </h1>
-              <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 justify-between shadow-md">
+              <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 dark:bg-black justify-between shadow-md">
                 <img
                   src={game}
                   alt="game"
@@ -147,10 +147,10 @@ function Event() {
             </div>
           </div>
         </section>
-        <div className="min-h-screen bg-amber-100 p-4">
+        <div className="min-h-screen bg-amber-100 dark:bg-black p-4">
           <div className="container mx-auto flex flex-col flex-col-reverse lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
             {/* Calendar */}
-            <div className="bg-white shadow-md rounded-lg p-6 w-full lg:w-1/3">
+            <div className="bg-white dark:bg-amber-800 shadow-md rounded-lg p-6 w-full lg:w-1/3">
               <h2 className="text-xl font-bold mb-4">Event Calendar</h2>
               <div className="text-center mb-4">
                 <span className="text-2xl font-semibold">
@@ -175,26 +175,26 @@ function Event() {
                     className={`p-2 border rounded-md ${
                       day === currentDate
                         ? 'bg-blue-500 text-white'
-                        : 'bg-gray-100'
+                        : 'bg-gray-100 dark:bg-black'
                     }`}
                   >
                     {day}
                   </div>
                 ))}
               </div>
               <div className="text-center mt-4">
-                <button className="bg-[#FEF3C7] text-gray-700 px-4 py-2 rounded-md mt-4">
+                <button className="bg-[#FEF3C7] dark:bg-black text-gray-700 dark:text-white px-4 py-2 rounded-md mt-4">
                   Register for Event
                 </button>
               </div>
               <div className="text-center mt-4">
-                <button className="bg-white border border-green-500 px-4 py-2 rounded-md mt-2 text-green-500 hover:bg-green-500 hover:text-white">
+                <button className="bg-amber-100 dark:bg-yellow border border-green-500 px-4 py-2 rounded-md mt-2 text-green-500 dark:text-black hover:bg-green-500 hover:text-white">
                   Learn More
                 </button>
               </div>
             </div>
             {/* Pictures */}
-            <div className="bg-white shadow-md rounded-lg p-6 w-full lg:w-2/3">
+            <div className="bg-white dark:bg-amber-800 shadow-md rounded-lg p-6 w-full lg:w-2/3">
               <h2 className="text-xl font-bold mb-4">Event Pictures</h2>
               <div className="splide w-full h-full">
                 <div className="splide__track w-full ">

frontend/src/components/Pages/Login.jsx

@@ -56,16 +56,16 @@ const Login = () => {
   }, []);
 
   return (
-    <div className="w-screen h-screen flex items-center justify-center pt-10">
+    <div className="w-screen h-screen flex items-center justify-center pt-10 dark:bg-black">
       <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form
         onSubmit={(e) => handleSubmit(e)}
-        className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-4 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
+        className="form z-10 p-16 bg-lightblue dark:bg-amber-900 flex flex-col items-start justify-center gap-4 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
       >
-        <div className="title text-[#323232] font-black text-7xl mb-6">
+        <div className="title text-[#323232] dark:text-white font-black text-7xl mb-6 ">
           Welcome,
           <br />
-          <span className="block text-[#666] font-semibold text-2xl ">
+          <span className="block text-[#666] dark:text-white font-semibold text-2xl ">
             Log in to continue
           </span>
         </div>
@@ -96,31 +96,31 @@ const Login = () => {
           </button>
         </div>
 
-        <div className="transform hover:text-red-500 transition">
+        <div className="transform hover:text-red-500 dark:hover:text-yellow-300 transition">
           <Link to={'/email-verify'}>Forgot Password?</Link>
         </div>
 
         <h3 className="flex items-center justify-between w-full">
           Dont have an account?
-          <span className="block text-[#666] font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition">
+          <span className="block text-[#666] dark:text-white font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 dark:hover:text-green-200 transition">
             <Link to={'/signup'}>Register Here</Link>
           </span>
         </h3>
         <a
           href={`${API_URL}/api/user/auth/google`}
-          className="text-[#666] font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition w-full"
+          className="text-[#666] dark:text-white font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition w-full"
         >
           <button
             type="button"
-            className="button-confirm px-4 w-full h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
+            className="button-confirm dark:text-white px-4 w-full h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
           >
             Sign in with Google
           </button>
         </a>
         {error && <p className="text-red-500 mt-2">{error}</p>}
         <button
           type="submit"
-          className="button-confirm px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
+          className="button-confirm dark:text-white px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"
         >
           {isLoading ? 'Loading...' : 'Let’s Log you in →'}
         </button>

frontend/src/components/Pages/Menu.jsx

@@ -39,19 +39,19 @@ function ParallaxImage() {
   return (
     <>
       <div
-        className="w-full h-auto bg-amber-100 items-center justify-center overflow-hidden"
+        className="w-full h-auto bg-amber-100 dark:bg-black items-center justify-center overflow-hidden"
         onMouseMove={handleMouseMove}
       >
         <div className="flex md:flex-row flex-col items-center justify-between mt-24 mb-20">
           <div className="w-3/4 pl-8 text-left animate-fadeIn">
-            <h1 className="md:text-7xl text-4xl text-black font-bold font-mono mb-4">
+            <h1 className="md:text-7xl text-4xl text-black dark:text-white font-bold font-mono mb-4">
               Discover Sip & Play
             </h1>
             <p className="md:text-3xl text-xl font-mono mb-8">
               Dive into a world of flavor with our immersive 3D Menu experience
             </p>
           </div>
-          <div className="w-full flex justify-center items-center rounded-e-full z-1 shadow-lg bg-amber-200 animate-slideIn">
+          <div className="w-full flex justify-center items-center rounded-e-full z-1 shadow-lg bg-amber-200 dark:bg-amber-900 animate-slideIn">
             <motion.img
               src={Cafe3dImg}
               alt="3D Coffee Shop"
@@ -79,7 +79,7 @@ function ParallaxImage() {
           <Mybook />
         </div>
         <div
-          className="w-full md:flex md:items-center md:justify-center"
+          className="w-full md:flex md:items-center md:justify-center "
           style={{ paddingBottom: '80px' }}
         >
           {' '}

frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx

@@ -19,7 +19,7 @@ const ThankPage = () => {
           }}
         />
 
-        <div className="hidden md:block relative z-10 space-y-8 bg-white  p-8 -mt-20 rounded-lg shadow-lg max-w-lg mx-auto">
+        <div className="hidden md:block relative z-10 space-y-8 bg-amber-100  p-8 -mt-20 rounded-lg shadow-lg max-w-lg mx-auto">
           <img
             src={logo}
             alt="Sip&Play Cafe Logo"

frontend/src/components/Pages/Pages.jsx

@@ -8,7 +8,7 @@ const Page = forwardRef((props, ref) => {
     window.scrollTo(0, 0);
   }, []);
   return (
-    <div className="demoPage bg-white" ref={ref}>
+    <div className="demoPage bg-amber-100" ref={ref}>
       <div className="h-full">{props.children}</div>
       <p className="text-xs text-end text-black pb-4">
         Page number: {props.number}

frontend/src/components/Pages/Register.jsx

@@ -41,13 +41,13 @@ function Register() {
 
   return (
     <>
-      <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0">
+      <div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0 dark:bg-black dark:text-white">
         <section className="w-full py-12 md:py-24 lg:py-32 flex flex-col md:flex-row">
           <div className="container px-4 md:px-6 text-center text-primary-foreground w-full md:w-2/5 md:mt-10">
-            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl md:text-5xl lg:text-8xl text-gray-800">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl md:text-5xl lg:text-8xl text-gray-800 dark:text-white">
               RESERVE YOUR SPOT AT THE BOARD GAME CAFE
             </h1>
-            <button className="inline-flex items-center justify-center mt-4 bg-[#D9D9D9] hover:bg-[#C9C9C9] rounded-full p-4">
+            <button className="inline-flex items-center justify-center mt-4 bg-[#D9D9D9] hover:bg-[#C9C9C9] rounded-full p-4 dark:text-black">
               Make a Reservation
             </button>
           </div>
@@ -61,7 +61,7 @@ function Register() {
           </div>
         </section>
         <section className="w-full py-12 md:py-24 lg:py-32 px-6 md:px-6 border-2 border-gray-200">
-          <div className="w-full md:w-3/5 lg:w-2/5 mx-auto border-2 p-7 rounded-lg border-black bg-amber-100">
+          <div className="w-full md:w-3/5 lg:w-2/5 mx-auto border-2 p-7 rounded-lg border-black bg-amber-100 dark:bg-amber-900">
             <div className="space-y-6">
               <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tighter">
                 Reserve Your Spot
@@ -135,7 +135,7 @@ function Register() {
                   </select>
                 </div>
                 <button
-                  className="inline-flex items-center justify-center p-4 bg-[#D9D9D9] hover:bg-[#C9C9C9]"
+                  className="inline-flex items-center justify-center p-4 bg-[#D9D9D9] dark:bg-amber-500 dark:text-black hover:bg-[#C9C9C9]"
                   type="submit"
                   onClick={handleSubmit}
                 >
@@ -148,7 +148,7 @@ function Register() {
         <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter text-amber-100 bg-green-900 p-5 text-center">
           Popular Board Games
         </h1>
-        <div className="mt-8 w-full flex justify-center bg-white ">
+        <div className="mt-8 w-full flex justify-center bg-amber-100 dark:bg-black">
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-8 mb-10">
             {[
               { src: pic2, title: 'Catan', players: '4-6 players' },

frontend/src/components/Pages/TodaysSpecial.jsx

@@ -58,7 +58,7 @@ const TodaysSpecial = () => {
       <div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
         {/* Coffee Card */}
         <div
-          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          className="bg-pink-100 dark:bg-amber-900 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
           style={{ minHeight: '350px', maxHeight: '350px' }}  
           onMouseEnter={() => setHoveredItem('coffee')}
           onMouseLeave={() => setHoveredItem(null)}
@@ -67,7 +67,7 @@ const TodaysSpecial = () => {
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
 
           <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
+          <p className="text-gray-600 dark:text-amber-200">{todaysSpecial.coffee.description}</p>
 
           <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'coffee' ? 'opacity-100' : 'opacity-0'}`}>
             <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
@@ -77,7 +77,7 @@ const TodaysSpecial = () => {
 
         {/* Food Card */}
         <div
-          className="bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          className="bg-teal-100 dark:bg-amber-500 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
           style={{ minHeight: '350px', maxHeight: '350px' }}  
           onMouseEnter={() => setHoveredItem('food')}
           onMouseLeave={() => setHoveredItem(null)}
@@ -95,15 +95,15 @@ const TodaysSpecial = () => {
 
         {/* Drink Card */}
         <div
-          className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
+          className="bg-pink-100 dark:bg-amber-900 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
           style={{ minHeight: '350px', maxHeight: '350px'}}  
           onMouseEnter={() => setHoveredItem('drink')}
           onMouseLeave={() => setHoveredItem(null)}
         >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} loading="lazy"/>
 
           <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.drink.description}</p>
+          <p className="text-gray-600 dark:text-amber-200">{todaysSpecial.drink.description}</p>
 
           <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'drink' ? 'opacity-100' : 'opacity-0'}`}>
             <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.drink.originalPrice}</p>

frontend/src/components/Preloader.jsx

@@ -53,7 +53,7 @@ const Preloader = () => {
               animate={{ width: `${percentage}%` }}
               exit={{ width: 0 }}
               transition={{ duration: 0.1, ease: 'easeInOut' }}
-              className="absolute bottom-10 left-0 h-1 bg-white rounded-full"
+              className="absolute bottom-10 left-0 h-1 bg-amber-100 rounded-full"
             />
           </motion.div>
         )}