feat: Implement dark mode support by adjusting background and text colors across various pages and components.

web/experience/src/app/globals.css

@@ -3,9 +3,9 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 10, 10, 20;
-  --background-end-rgb: 0, 0, 0;
+  --background: 249, 250, 251;
+  --foreground: 17, 24, 39;
+  /* gray-900 */
 
   /* Branding Defaults */
   --primary-color: #3b82f6;
@@ -13,15 +13,27 @@
 
   --accent-primary: var(--primary-color);
   --accent-secondary: var(--secondary-color);
-  --glass-bg: rgba(255, 255, 255, 0.05);
-  /* Increased slightly for contrast */
-  --glass-border: rgba(255, 255, 255, 0.1);
+
+  --glass-bg: rgba(255, 255, 255, 0.8);
+  --glass-border: rgba(0, 0, 0, 0.1);
   --glass-blur: blur(16px);
+
+  --body-bg: radial-gradient(circle at top left, #f3f4f6, #f9fafb);
+}
+
+.dark {
+  --background: 5, 5, 5;
+  --foreground: 229, 231, 235;
+
+  --glass-bg: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.1);
+
+  --body-bg: radial-gradient(circle at top left, #1a1a2e, #000000);
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: radial-gradient(circle at top left, #1a1a2e, #000000);
+  color: rgb(var(--foreground));
+  background: var(--body-bg);
   background-attachment: fixed;
   min-height: 100vh;
 }
@@ -77,7 +89,7 @@ body {
 }
 
 .sidebar-link-inactive {
-  @apply text-gray-400 hover:text-white hover:bg-white/5;
+  @apply text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5;
 }
 
 /* Custom Scrollbar */