Add dark mode and extra feature

src/App.css

@@ -61,6 +61,78 @@ html,
     min-height: 0;
 }
 
+/* ===== DARK MODE VARIABLES ===== */
+
+/* Light Mode (Default) */
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+  --text-primary1: #2c3e50;
+  --text-secondary: #6c757d;
+  --text-tertiary: #adb5bd;
+  --border-color: #dee2e6;
+  --shadow: rgba(0, 0, 0, 0.1);
+  --shadow-lg: rgba(0, 0, 0, 0.15);
+  --accent-color: #007bff;
+  --accent-hover: #0056b3;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #242424;
+  --bg-tertiary: #2d2d2d;
+  --text-primary1: #ffffff;
+  --text-secondary: #b0b0b0;
+  --text-tertiary: #808080;
+  --border-color: #404040;
+  --border-color2:#1a1a1a;
+  --shadow: rgba(0, 0, 0, 0.5);
+  --shadow-lg: rgba(0, 0, 0, 0.7);
+  --accent-color: #4da3ff;
+  --accent-hover: #66b3ff;
+  --success-color: #4caf50;
+  --danger-color: #f44336;
+  --warning-color: #ffb300;
+}
+
+/* Apply to body */
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary1);
+  transition: background-color 0.3s ease, color 0.3s ease;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Common elements */
+input, textarea, select {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+button {
+  transition: all 0.3s ease;
+}
+
+a {
+
+  transition: color 0.3s ease;
+  text-decoration: none;
+}
+
+
+
 /* Tablet styles (max-width: 1024px) */
 @media (max-width: 1024px) {
     .app-content {

src/components/Create.jsx

@@ -66,6 +66,16 @@ const CreateRoom = () => {
     }
   };
 
+  // --- HANDLE IMAGE REMOVAL ---
+  const handleRemoveImage = (e) => {
+    e.stopPropagation(); // Prevent triggering the upload click
+    setSelectedFile(null);
+    setImagePreview(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''; // Reset file input
+    }
+  };
+
   const handleFreeJoin = async (roomId) => {
     try {
       const res = await api.post(`/api/rooms/${roomId}/join`);
@@ -176,7 +186,17 @@ const CreateRoom = () => {
             onClick={() => fileInputRef.current.click()}
           >
             {imagePreview ? (
+              <>
               <img src={imagePreview} alt="Room Preview" className={styles.previewImage} />
+               <button 
+                  type="button"
+                  className={styles.removeImageBtn}
+                  onClick={handleRemoveImage}
+                  aria-label="Remove image"
+                >
+                  ✕
+                </button>
+                </>
             ) : (
               <div className={styles.placeholder}>
                 <i className="fa-solid fa-plus"></i>

src/components/Create.module.css

@@ -4,9 +4,9 @@
     width: 100%;      /* Default to full width available */
     margin: 16px auto;
     padding: 28px 30px;
-    background: white;
+    background: var(--bg-primary);
     border-radius: 16px;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
+    box-shadow: 0 10px 40px var(--shadow-lg), 0 0 0 1px var(--border-color);
     font-family: 'Inter', sans-serif;
     box-sizing: border-box;
 
@@ -16,7 +16,7 @@
 
 .title {
     text-align: center;
-    color: #2c3e50;
+    color: var(--text-primary1);
     margin-bottom: 18px;
     margin-top: 0;
     font-weight: 800;
@@ -53,30 +53,56 @@
     width: 100%;
     max-width: 290px;
     height: 120px;
-    border: 2px dashed #ccc;
+    border: 2px dashed var(--border-color);
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
     transition: all 0.3s ease;
     overflow: hidden;
     margin: 0 auto;
 }
 
 .imageUploadBox:hover {
     border-color: #FFA116;
-    background-color: #fffdf5;
+    background-color: var(--bg-tertiary);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 161, 22, 0.15);
 }
 
+.removeImageBtn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  z-index: 10;
+  opacity: 0.7;
+}
+
+.removeImageBtn:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 1;
+  transform: scale(1.05);
+}
+
 .placeholder {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: #aaa;
+    color: var(--text-tertiary);
     gap: 10px;
 }
 
@@ -105,7 +131,7 @@
 .inputGroup label {
     font-size: 0.9rem;
     font-weight: 600;
-    color: #2c3e50;
+    color: var(--text-primary1);
     margin-left: 4px;
     margin-bottom: 0;
     letter-spacing: 0.02em;
@@ -116,14 +142,14 @@
     width: 100%; /* CRITICAL: Force inputs to fill the container */
     padding: 10px 13px;
     border-radius: 10px;
-    border: 1.5px solid #e0e0e0;
+    border: 1.5px solid var(--border-color);
     font-family: 'Inter', sans-serif;
     font-size: 0.95rem;
-    background-color: #fafafa;
+    background-color: var(--bg-secondary);
     outline: none;
     transition: all 0.3s ease;
     box-sizing: border-box; /* Ensures padding doesn't break width */
-    color: #2c3e50;
+    color: var(--text-primary1);
 }
 
 .inputGroup textarea {
@@ -137,14 +163,14 @@
 .inputGroup input:focus,
 .inputGroup textarea:focus {
     border-color: #FFA116;
-    background-color: white;
+    background-color: var(--bg-primary);
     box-shadow: 0 0 0 3px rgba(255, 161, 22, 0.1);
 }
 
 .inputGroup input::placeholder,
 .inputGroup textarea::placeholder {
-    color: #bbb;
-    opacity: 1;
+    color: var(--text-tertiary);
+    opacity: 0.7;
 }
 
 /* --- BUTTON --- */

src/components/Footer.module.css

@@ -9,19 +9,21 @@
   padding: 18px 40px 14px;
   font-family: Inter, sans-serif;
   width: 100%;
-  background: #ffffff;
+  background: var(--bg-primary);
   z-index: 100;
   box-sizing: border-box;
   gap: 6px;
+  transition: background-color 0.3s ease;
 }
 
 /* Divider Line */
 .line {
   width: 100%;
   height: 1px;
-  background-color: #d8d8d8;
+  background-color: var(--border-color);
   margin-bottom: 8px;
   border-radius: 2px;
+  transition: background-color 0.3s ease;
 }
 
 /* Legal Links Row */
@@ -34,33 +36,35 @@
   margin-bottom: 4px;
 }
 
-/* Single Link */
+/* Single Link - Force all states */
 .link {
   font-size: 14px;
-  color: #0a1427;
+  color: var(--text-primary1);
   text-decoration: none;
   opacity: 0.85;
-  transition: 0.2s;
+  transition: all 0.3s ease;
 }
 
 .link:hover {
   opacity: 1;
-  color: #ffa116; /* subtle highlight */
+  color: var(--accent) !important;
 }
 
 /* Dots between links */
 .dot {
-  color: #bbbbbb;
+  color: var(--text-tertiary);
   font-size: 12px;
   margin: 0 4px;
+  transition: color 0.3s ease;
 }
 
 /* Copyright */
 .text {
   margin: 0;
   font-size: 13px;
-  color: #020a1a;
+  color: var(--text-primary1);
   opacity: 0.75;
+  transition: color 0.3s ease;
 }
 
 /* Tablet (≤1024px) */
@@ -111,11 +115,11 @@
     gap: 6px;
   }
 
-  .link {
+  .link{
     font-size: 11px;
   }
 
   .text {
     font-size: 11px;
   }
-}
+}

src/components/Header.jsx

@@ -3,12 +3,15 @@ import { NavLink, useNavigate } from "react-router-dom";
 import { getToken } from "../auth/tokenStore";
 import { logout } from "../auth/logout";
 import styles from "./Header.module.css";
+import { useDarkMode } from "../context/DarkModeProvider";
+
 
 export default function Header() {
   const navigate = useNavigate();
   const [loggedIn, setLoggedIn] = useState(!!getToken());
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const mobileMenuRef = useRef(null);
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -53,13 +56,24 @@ export default function Header() {
           rel="noopener noreferrer"
           className={styles.githubButton}
         >
-          <img
-            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
-            alt="GitHub"
-            className={styles.githubIcon}
-          />
+
+         <i className="fab fa-github" style={{fontSize: '35px', color: 'var(--text-primary1)'}}></i>
+
         </a>
 
+         {/* Dark Mode Toggle Button */}
+        <button
+          onClick={toggleDarkMode}
+          className={styles.darkModeToggle}
+          aria-label="Toggle dark mode"
+        >
+          {isDarkMode ? (
+            <i className="fa-solid fa-sun"></i>
+          ) : (
+            <i className="fa-solid fa-moon"></i>
+          )}
+        </button>
+
         {/* Desktop Navigation */}
         <nav className={styles.mainNav}>
           <NavLink