feat: dark mode toggle

apps/web/app/globals.css

@@ -3,28 +3,33 @@
 @tailwind utilities;
 
 :root {
-  /* DARK MODE */
-  --bg-color: #0f1115;
-  --map-grid: rgba(255, 255, 255, 0.03);
-  --hud-glass: rgba(15, 17, 21, 0.85);
-  --hud-glass-solid: rgba(20, 22, 26, 0.95);
-  --hud-border: 1px solid rgba(255, 255, 255, 0.15);
-
-  /* NEON PALETTE */
-  --neon-maroon: #FF0055;
-  --neon-green: #00FF99;
-  --neon-blue: #00E5FF;
-  --neon-yellow: #FFD700;
-  --neon-pink: #FF00FF;
+  --bg-base: #f0f2f5; 
+  --bg-panel: rgba(255, 255, 255, 0.9); 
+  --bg-panel-hover: rgba(0, 0, 0, 0.05);
+
+  --text-primary: #121212;
+  --text-secondary: #555555;
+
+  --border-color: rgba(0, 0, 0, 0.15);
+  --shadow-glow: rgba(0, 136, 255, 0.2);
+}
 
-  --text-main: #FFFFFF;
-  --text-muted: #8899A6;
-  --shadow-hard: 0 10px 30px rgba(0, 0, 0, 0.6);
+.dark {
+  --bg-base: #0f1115; 
+  --bg-panel: rgba(10, 10, 12, 0.85); 
+  --bg-panel-hover: rgba(255, 255, 255, 0.1);
+
+  --text-primary: #ffffff;
+  --text-secondary: #8899A6;
+
+  --border-color: rgba(255, 255, 255, 0.15);
+  --shadow-glow: rgba(0, 229, 255, 0.2);
 }
 
 body {
-  background-color: var(--bg-color);
-  color: var(--text-main);
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -44,6 +49,55 @@ p, .font-desc, .details-card p {
   z-index: 0;
 }
 
+.tactical-panel {
+  background: var(--bg-panel);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  color: var(--text-primary);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+.tactical-button {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: 8px;
+  font-family: var(--font-chakra), sans-serif;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.tactical-button:hover {
+  background: var(--bg-panel-hover);
+  transform: translateY(-2px);
+}
+
+.tactical-button:active {
+  transform: translateY(1px);
+}
+
+.tactical-button-primary {
+  background: rgba(0, 229, 255, 0.15);
+  border: 1px solid var(--neon-blue);
+  color: var(--neon-blue);
+  box-shadow: 0 0 10px var(--shadow-glow);
+  border-radius: 8px;
+  font-family: var(--font-chakra), sans-serif;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.tactical-button-primary:hover {
+  background: var(--neon-blue);
+  color: var(--bg-base);
+  box-shadow: 0 0 20px var(--neon-blue);
+}
+
 /* --- UI LAYER --- */
 .ui-layer {
   position: absolute;
@@ -102,14 +156,13 @@ p, .font-desc, .details-card p {
 .search-input {
   width: 100%; 
   height: 44px;
-  background: rgba(10, 10, 12, 0.9);
+  background: var(--bg-panel);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 14px;
   box-sizing: border-box;
   padding: 0 40px 0 14px;
-
-  color: white; font-size: 13px; font-weight: 700;
+  color: var(--text-primary); font-size: 13px; font-weight: 700;
   font-family: var(--font-chakra);
 }
 .search-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); }
@@ -146,11 +199,11 @@ p, .font-desc, .details-card p {
 /* --- SIDE CONTROLS --- */
 .icon-button, .control-button {
   width: 44px; height: 44px;
-  background: rgba(10, 10, 12, 0.9);
+  background: var(--bg-panel);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 12px;
-  color: white;
+  color: var(--text-primary);
   display: flex; align-items: center; justify-content: center;
   cursor: pointer;
   transition: transform 0.1s;
@@ -166,13 +219,13 @@ p, .font-desc, .details-card p {
 
 .zoom-stack {
   display: flex; flex-direction: column;
-  background: rgba(10, 10, 12, 0.9);
+  background: var(--bg-panel);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 12px; overflow: hidden;
 }
 .control-button { border: none; border-radius: 0; }
-.divider { height: 1px; background: rgba(255, 255, 255, 0.1); width: 80%; margin: 0 auto; }
+.divider { height: 1px; background: var(--border-color); width: 80%; margin: 0 auto; }
 
 .transit-system-container {
     position: relative;
@@ -193,10 +246,10 @@ p, .font-desc, .details-card p {
     margin-left: 12px;
     display: flex;
     gap: 8px;
-    background: rgba(10, 10, 12, 0.85);
+    background: var(--bg-panel);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--border-color);
     border-radius: 20px;
     padding: 6px;
     animation: extrudeRight 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
@@ -219,8 +272,8 @@ p, .font-desc, .details-card p {
 
 .route-node:hover {
     transform: scale(1.1);
-    background: rgba(255, 255, 255, 0.1) !important;
-    color: white !important;
+    background: var(--bg-panel-hover) !important;
+    color: var(--text-primary) !important;
 }
 
 @keyframes extrudeRight {

apps/web/app/layout.tsx

@@ -3,6 +3,7 @@ import { Chakra_Petch, Nunito } from "next/font/google";
 import localFont from "next/font/local";
 import "./globals.css";
 import { TRPCProvider } from "@/components/TRPCProvider";
+import { ThemeProvider } from "@/lib/ThemeContext";
 
 const chakra = Chakra_Petch({
 	weight: ["300", "400", "500", "600", "700"],
@@ -40,17 +41,19 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-	children,
+    children,
 }: Readonly<{
-	children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-	return (
-		<TRPCProvider>
-			<html lang="en">
-				<body className={`${chakra.variable} ${nunito.variable} ${cubaoFree.variable} ${cubaoFreeNarrow.variable} ${cubaoFreeWide.variable}`}>
-					{children}
-				</body>
-			</html>
-		</TRPCProvider>
-	);
+    return (
+        <TRPCProvider>
+            <html lang="en">
+                <body suppressHydrationWarning className={`${chakra.variable} ${nunito.variable} ${cubaoFree.variable} ${cubaoFreeNarrow.variable} ${cubaoFreeWide.variable}`}>
+                    <ThemeProvider>
+                        {children}
+                    </ThemeProvider>
+                </body>
+            </html>
+        </TRPCProvider>
+    );
 }

apps/web/app/page.tsx

@@ -4,6 +4,8 @@ import {
 	APIProvider,
 	Map as GoogleMap,
 	AdvancedMarker,
+	ColorScheme,
+	MapCameraChangedEvent,
 } from "@vis.gl/react-google-maps";
 import { HeadsUpDisplay } from "@/components/HeadsUpDisplay";
 import { NeonPin } from "@/components/NeonPin";
@@ -15,7 +17,8 @@ import { TargetLine } from "@/components/TargetLine";
 import { Polyline } from "@/components/Polyline";
 import { Polygon } from "@/components/Polygon";
 import { JEEPNEY_ROUTES, CAMPUS_ZONES, ZONE_CATEGORIES } from "@/data/map-layers";
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { useTheme } from "@/lib/ThemeContext";
 import { trpc } from "@/lib/trpc";
 
 export default function Home() {
@@ -54,6 +57,20 @@ export default function Home() {
         );
     };
 
+	const [cameraProps, setCameraProps] = useState({
+        center: { lat: 14.6549, lng: 121.0645 },
+        zoom: 19,
+    });
+
+    const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
+        setCameraProps({
+            center: ev.detail.center,
+            zoom: ev.detail.zoom,
+        });
+    }, []);
+
+	const { theme } = useTheme();
+
 	const [pendingPinCoords, setPendingPinCoords] = useState<{
 		lat: number;
 		lng: number;
@@ -99,10 +116,12 @@ export default function Home() {
 			>
 				{/* MAP LAYER */}
 				<GoogleMap
-					defaultCenter={{ lat: 14.6549, lng: 121.0645 }}
-					defaultZoom={19}
+					center={cameraProps.center}
+                    zoom={cameraProps.zoom}
+                    onCameraChanged={handleCameraChange}
 					minZoom={17}
 					mapId={process.env.NEXT_PUBLIC_MAP_ID || "71238adec955b8c6d66f595a"}
+					colorScheme={theme === "dark" ? ColorScheme.DARK : ColorScheme.LIGHT}
 					gestureHandling={"greedy"}
 					disableDefaultUI={true}
 					onClick={(e) => {
@@ -216,7 +235,7 @@ export default function Home() {
                     onSearchChange={setSearchQuery}
                     activeRoutes={activeRoutes}
                     onToggleRoute={handleToggleRoute}
-					activeZoneCategories={activeZoneCategories}
+                    activeZoneCategories={activeZoneCategories}
                     onToggleZoneCategory={handleToggleZoneCategory}
                 />