Added the Dark Mode option to the project - Ritankar_Saha Fixes #357

src/App.css

@@ -70,6 +70,9 @@
 
 body {
     font-family: "Poppins", sans-serif;
+    /* modifying the body color a little bit to fit in with the dark mode component */
+    background-color: #ffffff;
+   color: #000000;
 }
 
 .pagination-container {
@@ -120,4 +123,51 @@ body {
     pointer-events: none;
     border: none;
     font-weight: 600;
-}
+}
+
+/* adding the necessary styling components for dark mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+.navbar {
+  background-color: #ffffff; /* Light mode background color */
+}
+
+body.dark-mode .navbar {
+  background-color: #1f1f1f; /* Dark mode background color */
+}
+
+.navbar a,
+.navbar h1,
+.navbar button {
+  color: #000000; /* Light mode text color */
+}
+
+body.dark-mode .navbar a,
+body.dark-mode .navbar h1,
+body.dark-mode .navbar button {
+  color: #ffffff; /* Dark mode text color */
+}
+
+/* Applying dark mode styles to all necessary elements */
+.dark-mode h1,
+.dark-mode h2,
+.dark-mode h3,
+.dark-mode p,
+.dark-mode a,
+.dark-mode span,
+.dark-mode button {
+  color: #ffffff;
+}
+
+.dark-mode .btn {
+  background-color: #333333;
+  color: #ffffff;
+}
+
+.dark-mode .card {
+  background-color: #1f1f1f;
+  border-color: #333333;
+}

src/App.jsx

@@ -1,3 +1,4 @@
+// src/App.js
 import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
@@ -6,17 +7,17 @@ import Explore from "./pages/Explore";
 import Homeque from "./components/Homeque";
 import DetailView from "./components/DetailView";
 import NotFound from "./pages/NotFound";
-import { ContactUs } from "./pages/ContactUs"
+import { ContactUs } from "./pages/ContactUs";
 import "./App.css";
-import {Faq} from "./components/Faq";
+import { Faq } from "./components/Faq";
 import AboutUs from "./pages/AboutUs";
 import Register from "./pages/Register";
 import Login from "./pages/Login";
 
 function App() {
   return (
     <BrowserRouter>
-    <Navbar/>
+      <Navbar />
       <Routes>
         <Route path="/places" element={<Homeque />} />
         <Route path="/explore" element={<Explore />} />

src/components/DarkModeToggle.jsx

@@ -0,0 +1,39 @@
+
+// This is the dark mode toggle component created to effeciently allow the user to toggle between the light and dark components 
+
+import React, { useState, useEffect } from "react";
+
+
+//dark mode toggle component
+const DarkModeToggle = () => {
+  const [darkMode, setDarkMode] = useState(() => {
+    const savedMode = localStorage.getItem("darkMode");
+    return savedMode ? JSON.parse(savedMode) : false;
+  });
+
+
+  //toggle logic
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+    }
+    localStorage.setItem("darkMode", JSON.stringify(darkMode));
+  }, [darkMode]);
+
+
+  //setting the component
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => !prevMode);
+  };
+
+  //rendering the result across the webpages.
+  return (
+    <button onClick={toggleDarkMode} className="dark-mode-toggle">
+      {darkMode ? "Light Mode" : "Dark Mode"}
+    </button>
+  );
+};
+
+export default DarkModeToggle;

src/components/Navbar.jsx

@@ -1,19 +1,16 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
+//importing the dark mode component and using it whereever necessary.
+import DarkModeToggle from "./DarkModeToggle";
 
 function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
 
-  const [btnclick, setBtnclick] = useState(false);
-  const btnClick = () => {
-    setBtnclick(!btnclick);
-  };
-
   return (
-    <nav className={` ${isOpen ? "block" : "flex"} md:flex items-center shadow-xl fixed top-0 w-full bg-white z-10 px-4 py-2 sm:px-8 md:px-12 lg:px-16 md:justify-between lg:justify-around`}>
+    <nav className={`navbar ${isOpen ? "block" : "flex"} md:flex items-center shadow-xl fixed top-0 w-full z-10 px-4 py-2 sm:px-8 md:px-12 lg:px-16 md:justify-between lg:justify-around`}>
       <style>
         @import
         url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Montserrat:wght@500&display=swap');
@@ -24,55 +21,45 @@ function Navbar() {
             Bharat <span id="samarkand">Yatra</span>
           </h1>
         </Link>
-
-
         <div className="md:hidden">
-        <button className="focus:outline-none" onClick={toggleMenu} >
-          <svg
-            className={`w-6 h-6 ${isOpen ? "hidden" : "block"}`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-          </svg>
-          <svg
-            className={`w-6 h-6 ${isOpen ? "block" : "hidden"}`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
-
-
-
-
-
-
+          <button className="focus:outline-none" onClick={toggleMenu}>
+            <svg
+              className={`w-6 h-6 ${isOpen ? "hidden" : "block"}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+            <svg
+              className={`w-6 h-6 ${isOpen ? "block" : "hidden"}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
       <div
         className={`${
-            isOpen ? "block text-center" : "hidden"
-          } md:flex md:items-center md:w-auto w-full`}
+          isOpen ? "block text-center" : "hidden"
+        } md:flex md:items-center md:w-auto w-full`}
       >
-        <ul
-          className={` md:flex md:justify-center md:pt-0 pt-4 list-none`}
-        >
+        <ul className={`md:flex md:justify-center md:pt-0 pt-4 list-none`}>
           <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
             <Link to="/">Home</Link>
           </li>
@@ -107,6 +94,10 @@ function Navbar() {
           <li className="text-lg hover:text-gray-500 mx-5 my-2 md:my-0" onClick={toggleMenu}>
             <Link to="/contact">Contact Us</Link>
           </li>
+          {/* adding the dark mode toggle component in the navabr */}
+          <li className="text-lg mx-5 my-2 md:my-0">
+            <DarkModeToggle />
+          </li>
         </ul>
       </div>
     </nav>