Ayan / Dark and light mode for MCC #358 (#602)

# Purpose
Adds Light mode and Dark mode

# New Changes
Fixes NAVbar issues (navbar being too big)
Fixes hardcoded values for colors so future readers can read it easily

Author: Ayan-Nalawade

gs/frontend/mcc/package-lock.json

@@ -8,6 +8,7 @@ import Dashboard from "./pages/Dashboard";
 import AROAdmin from "./pages/AROAdmin";
 import LiveSession from "./pages/LiveSession";
 import Login from "./pages/Login";
+import { ThemeProvider } from "./contexts/ThemeContext";
 import PageNotFound from "./components/PageNotFound";
 
 /**
@@ -16,19 +17,21 @@ import PageNotFound from "./components/PageNotFound";
  */
 function App() {
   return (
-    <>
+    <ThemeProvider>
       <Nav />
       <Background />
-      <Routes>
-        <Route path="/" element={<Dashboard />} />
-        <Route path="/commands" element={<Commands />} />
-        <Route path="/telemetry-data" element={<AROAdmin />} />
-        <Route path="/aro-requests" element={<LiveSession />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="*" element={<PageNotFound />} />
-      </Routes>
+      <div className="pt-16">
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/commands" element={<Commands />} />
+          <Route path="/telemetry-data" element={<AROAdmin />} />
+          <Route path="/aro-requests" element={<LiveSession />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="*" element={<PageNotFound />} />
+        </Routes>
+      </div>
       <ToastContainer />
-    </>
+    </ThemeProvider>
   );
 }
 

gs/frontend/mcc/src/App.tsx

@@ -2,16 +2,26 @@ import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import Background from "./Background";
+import { ThemeProvider } from "../contexts/ThemeContext";
 
 describe("Background", () => {
   it("renders background image", () => {
-    render(<Background />);
+    render(
+      <ThemeProvider>
+        <Background />
+      </ThemeProvider>
+    );
     expect(screen.getByAltText("background-image")).toBeInTheDocument();
   });
 
   it("has correct CSS classes", () => {
-    render(<Background />);
+    render(
+      <ThemeProvider>
+        <Background />
+      </ThemeProvider>
+    );
     const image = screen.getByAltText("background-image");
-    expect(image).toHaveClass("fixed bottom-0 left-0 w-full object-cover -z-10 opacity-40");
+    // In light mode (default), opacity should be slightly higher for visibility
+    expect(image).toHaveClass("opacity-30");
   });
 });

gs/frontend/mcc/src/components/Background.test.tsx

@@ -1,16 +1,30 @@
 import background from "../assets/earth_compressed.webp";
+import { useTheme } from "../contexts/ThemeContext";
 
 /**
  * @brief Background component displaying the Earth image
  * @return tsx element of Background component
  */
 function Background() {
+  const { theme } = useTheme();
+
   return (
-    <img
-      src={background}
-      alt="background-image"
-      className="fixed bottom-0 left-0 w-full object-cover -z-10 opacity-40"
-    />
+    <>
+      <img
+        src={background}
+        alt="background-image"
+        className={`fixed inset-0 h-full w-full object-cover -z-20 transition-opacity duration-300 ${
+          theme === "dark" ? "opacity-40" : "opacity-30"
+        }`}
+      />
+      <div
+        className={`fixed inset-0 -z-10 transition-colors duration-300 ${
+          theme === "dark"
+            ? "bg-gradient-to-b from-gray-950/90 via-gray-950/70 to-transparent"
+            : "bg-gradient-to-b from-slate-100/80 via-slate-100/50 to-transparent"
+        }`}
+      />
+    </>
   );
 }
 

gs/frontend/mcc/src/components/Background.tsx

@@ -3,22 +3,27 @@ import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import "@testing-library/jest-dom";
 import Nav from "./Nav";
+import { ThemeProvider } from "../contexts/ThemeContext";
 
 describe("Nav", () => {
   it("renders logo", () => {
     render(
-      <BrowserRouter>
-        <Nav />
-      </BrowserRouter>
+      <ThemeProvider>
+        <BrowserRouter>
+          <Nav />
+        </BrowserRouter>
+      </ThemeProvider>
     );
     expect(screen.getByAltText("orbital logo")).toBeInTheDocument();
   });
 
   it("renders navigation links", () => {
     render(
-      <BrowserRouter>
-        <Nav />
-      </BrowserRouter>
+      <ThemeProvider>
+        <BrowserRouter>
+          <Nav />
+        </BrowserRouter>
+      </ThemeProvider>
     );
     expect(screen.getByText("Dashboard")).toBeInTheDocument();
     expect(screen.getByText("Commands")).toBeInTheDocument();

gs/frontend/mcc/src/components/Nav.test.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import orbital_logo from "../assets/orbital_logo.png";
 import { NAVIGATION_LINKS } from "../utils/nav-links";
+import { useTheme } from "../contexts/ThemeContext";
 
 /**
  * @brief Nav component displaying the navigation bar
@@ -9,39 +10,95 @@ import { NAVIGATION_LINKS } from "../utils/nav-links";
 function Nav() {
   // TODO: create user auth that checks if the user is logged in
   const isLoggedIn = false;
+  const { theme, toggleTheme } = useTheme();
 
   return (
-    <nav className="m-7">
+    <nav className="fixed top-0 left-0 right-0 h-16 px-8 flex items-center justify-between bg-background/80 backdrop-blur-sm border-b border-border z-50">
       {/* Logo */}
-      <div className="fixed left-8">
-        <Link to="/" className="hover:opacity-80 transition-opacity">
-          <img src={orbital_logo} alt="orbital logo" className="h-12 w-auto" />
-        </Link>
-      </div>
+      <Link to="/" className="hover:opacity-80 transition-opacity">
+        <img src={orbital_logo} alt="orbital logo" className="h-10 w-auto" />
+      </Link>
 
       {/* Navigation Links */}
-      <div className="fixed left-1/2 transform -translate-x-1/2 mt-3 flex space-x-7">
+      <div className="flex space-x-7">
         {NAVIGATION_LINKS.map((link) => (
-          <Link key={link.url} to={link.url} className="hover:underline">
+          <Link
+            key={link.url}
+            to={link.url}
+            className="hover:underline transition-colors"
+          >
             {link.text}
           </Link>
         ))}
       </div>
 
-      {/* Profile or Login page, depending on authentication state */}
-      {isLoggedIn ? (
-        <div className="fixed right-8 mt-2 border-1 border-white rounded-xl p-1 px-2 hover:bg-white hover:text-black">
-          <Link to="/profile" className="">
+
+      <div className="flex items-center gap-4">
+
+        <button
+          onClick={toggleTheme}
+          className="w-10 h-10 flex items-center justify-center rounded-full border border-foreground/20 hover:bg-accent transition-colors"
+          aria-label="Toggle theme"
+          title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+        >
+          {theme === "light" ? (
+
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
+          ) : (
+
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2" />
+              <path d="M12 20v2" />
+              <path d="m4.93 4.93 1.41 1.41" />
+              <path d="m17.66 17.66 1.41 1.41" />
+              <path d="M2 12h2" />
+              <path d="M20 12h2" />
+              <path d="m6.34 17.66-1.41 1.41" />
+              <path d="m19.07 4.93-1.41 1.41" />
+            </svg>
+          )}
+        </button>
+
+
+        {isLoggedIn ? (
+          <Link
+            to="/profile"
+            className="border border-foreground/20 rounded-xl px-4 py-2 hover:bg-accent transition-colors"
+          >
             Profile
           </Link>
-        </div>
-      ) : (
-        <div className="fixed right-8 mt-2 border-1 border-white rounded-xl p-1 px-2 hover:bg-white hover:text-black">
-          <Link to="/login" className="">
+        ) : (
+          <Link
+            to="/login"
+            className="border border-foreground/20 rounded-xl px-4 py-2 hover:bg-accent transition-colors"
+          >
             Login
           </Link>
-        </div>
-      )}
+        )}
+      </div>
     </nav>
   );
 }

gs/frontend/mcc/src/components/Nav.tsx

@@ -56,21 +56,21 @@ function Table<T>({
             placeholder="Search..."
             value={globalFilter ?? ""}
             onChange={(e) => setGlobalFilter(e.target.value)}
-            className="flex-1 bg-gray-800/50 text-white px-4 py-2 rounded-lg border border-gray-600/50 focus:outline-none focus:border-gray-500"
+            className="flex-1 bg-input text-foreground px-4 py-2 rounded-lg border border-border focus:outline-none focus:border-ring"
           />
         </div>
       )}
 
       {/* Table */}
-      <div className="bg-gray-900/30 backdrop-blur-sm rounded-lg overflow-hidden border border-gray-700/50">
-        <table className="w-full text-white">
+      <div className="bg-card backdrop-blur-sm rounded-lg overflow-hidden border border-border">
+        <table className="w-full text-foreground">
           <thead>
             {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="border-b border-gray-700/50">
+              <tr key={headerGroup.id} className="border-b border-border">
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    className="text-left px-6 py-4 font-normal text-gray-300"
+                    className="text-left px-6 py-4 font-normal text-muted-foreground"
                   >
                     {header.isPlaceholder
                       ? null
@@ -87,13 +87,13 @@ function Table<T>({
             {table.getRowModel().rows.map((row) => (
               <tr
                 key={row.id}
-                className={`border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors ${
+                className={`border-b border-border hover:bg-accent transition-colors ${
                   onRowClick ? "cursor-pointer" : ""
                 }`}
                 onClick={() => onRowClick?.(row.original)}
               >
                 {row.getVisibleCells().map((cell) => (
-                  <td key={cell.id} className="px-6 py-4 text-gray-200">
+                  <td key={cell.id} className="px-6 py-4 text-foreground">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
                 ))}

gs/frontend/mcc/src/components/Table.tsx

@@ -0,0 +1,53 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem("theme") as Theme | null;
+    if (stored) return stored;
+
+
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) { // Find system Preference
+      return "dark";
+    }
+    return "light";
+  });
+
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}