Update :- Light and Dark mode & Dashbord

src/components/Navbar.css

@@ -1,42 +1,58 @@
 /* Navbar.css */
 .navbar {
-    display: flex;
-    justify-content: start; /* Center the links */
-    align-items: start;
-    background-color: #f9cff2; /* Darker background */
-    padding: 1.7rem;
-    position: fixed; /* Fix the navbar at the top */
-    top: 0;
-    left: 0;
-    width: 100%; /* Stretch the navbar across the entire screen */
-    z-index: 1000; /* Ensure it stays on top */
-  }
-
-  .navbar a {
-    display: inline-block;
-    padding: 0rem 0.9rem 0.5rem 0.9rem ;
-    color: #111344; /* Light blue text */
-    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    margin: 0px 20px;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 1.2rem;
-    transition: background-color 0.3s ease;
-  }
-
-  .navbar a:hover {
-    background-color: #eba6e6; /* Slightly brighter on hover */
-    border-radius: 8px;
-  }
-
-  .navbar a.active {
-    color: #ffffff; /* White color for active link */
-    border-bottom: 2px solid #61dafb;
-  }
-
-  /* Add some margin to push content below the navbar */
-  .body-content {
-    margin-top: 40px; /* Adjust this based on the height of your navbar */
-  }
-
-
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  padding: 1.7rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+body.dark .navbar {
+  background-color: #333;
+}
+
+body.dark .navbar a {
+  color: #f0f0f0;
+}
+
+.navbar.light {
+  background-color: #f9cff2;
+}
+
+.navbar.dark {
+  background-color: #333333;
+}
+
+.navbar a {
+  display: inline-block;
+  padding: 0rem 0.9rem 0.5rem 0.9rem;
+  margin: 0px 20px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.2rem;
+  transition: background-color 0.3s ease;
+}
+
+.navbar a.light {
+  color: #111344;
+}
+
+.navbar a.dark {
+  color: #f9f9f9;
+}
+
+.navbar a:hover {
+  background-color: #eba6e6;
+  border-radius: 8px;
+}
+
+.navbar a.active {
+  border-bottom: 2px solid #61dafb;
+}
+
+.body-content {
+  margin-top: 40px;
+}

src/components/Navbar.jsx

@@ -1,16 +1,19 @@
-// Navbar.jsx
 import React from "react";
 import { Link } from "react-router-dom";
+import ThemeToggle from "./ThemeToggle";
 import "./Navbar.css";
 
 const Navbar = () => {
+  const currentTheme = localStorage.getItem("theme") || "light";
+
   return (
-    <nav className="navbar">
-      <Link to="/dashboard">Dashboard</Link>
-      <Link to="/posts">Posts</Link>
-      <Link to="/analytics">Analytics</Link>
-      <Link to="/contributors">Contributors</Link>
-      <Link to="/settings">Settings</Link>
+    <nav className={`navbar ${currentTheme}`}>
+      <Link to="/dashboard" className={`navbar-link ${currentTheme}`}>Dashboard</Link>
+      <Link to="/posts" className={`navbar-link ${currentTheme}`}>Posts</Link>
+      <Link to="/analytics" className={`navbar-link ${currentTheme}`}>Analytics</Link>
+      <Link to="/contributors" className={`navbar-link ${currentTheme}`}>Contributors</Link>
+      <Link to="/settings" className={`navbar-link ${currentTheme}`}>Settings</Link>
+      <ThemeToggle />
     </nav>
   );
 };

src/components/ThemeToggle.css

@@ -0,0 +1,69 @@
+body.light {
+    background-color: #ffffff;
+    color: #111344;
+  }
+
+  body.dark {
+    background-color: #1e1e1e;
+    color: #f9f9f9;
+  }
+
+  .navbar.light {
+    background-color: #f9cff2; /* Light mode background */
+  }
+
+  .navbar.dark {
+    background-color: #333333; /* Dark mode background */
+  }
+
+  .navbar a.light {
+    color: #111344; /* Light mode text */
+  }
+
+  .navbar a.dark {
+    color: #f9f9f9; /* Dark mode text */
+  }
+
+  /* Wheel styling */
+  .wheel {
+    width: 100px; /* Diameter of the wheel */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  margin-left: 33vw;
+  margin-bottom: 63vh;
+    transition: transform 0.4s ease; /* smooth transition */
+
+  }
+
+  /* Inner wheel styling */
+  .wheel-inner {
+    width: 80%; /* Inner circle */
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem; /* Icon size */
+    transition: transform 0.4s ease;
+  }
+
+  /* Rotate effect on hover */
+  .wheel:hover {
+    transform: rotate(360deg); /* full rotation */
+  }
+
+  /* Wiggle effect on click */
+  .wheel:active .wheel-inner {
+    animation: wiggle 0.5s ease; /* trigger wiggle when clicked */
+  }
+
+  /* Keyframes for wiggle effect */
+  @keyframes wiggle {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(10deg); }
+    50% { transform: rotate(-10deg); }
+    75% { transform: rotate(10deg); }
+    100% { transform: rotate(0deg); }
+  }
+

src/components/ThemeToggle.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+import "./ThemeToggle.css";
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(localStorage.getItem("theme") || "light");
+
+  useEffect(() => {
+    document.body.className = theme;
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <div className="wheel" onClick={toggleTheme}>
+      <div className="wheel-inner">
+        {theme === "light" ? "🌚" : "🌞"}
+      </div>
+    </div>
+  );
+};
+
+export default ThemeToggle;

src/pages/Dashboard.css

@@ -4,6 +4,20 @@
     padding: 0;
     box-sizing: border-box;
   }
+  :root {
+    --bg-color: #f0f0f0;
+    --text-color: #111;
+    --card-bg: white;
+    --chart-bg: white;
+  }
+
+  /* Dark mode */
+  body.dark {
+    --bg-color: #1e1e1e;
+    --text-color: #f0f0f0;
+    --card-bg: #333;
+    --chart-bg: #444;
+  }
 
   html, body {
     height: 100%;
@@ -20,7 +34,9 @@
     width: 100vw; /* Full width of the viewport */
     padding: 10px;
     box-sizing: border-box;
-    background-color: #f0f0f0; /* Optional background color */
+
+    background-color: var(--bg-color);
+    color: var(--text-color);
   }
 
   h1 {
@@ -31,6 +47,7 @@
   }
 
   .cards-container {
+
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
@@ -39,16 +56,20 @@
   }
 
   .card {
-    background-color: white;
+    background-color: var(--card-bg); /* Dynamic background color based on mode */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
-    padding: 10px;
+    padding: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    min-height: 150px;
+    width: 100%;
   }
 
+
+
   .charts-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -67,6 +88,7 @@
     align-items: center;
     height: 70%;
     margin-top: 20px;
+    background-color: var(--chart-bg);
   }