feat: Add dark/light mode theme switching with dynamic favicons

Implemented comprehensive dark/light mode support throughout the app:

- Added ColorSchemeScript to layout for auto-detection of system preference
- Updated MantineProvider to use 'auto' color scheme (respects system)
- Updated theme.ts with dynamic Paper component styles based on color scheme
- Created ThemeToggle component with sun/moon icons
- Added toggle to desktop sidebar navigation
- Created theme-specific favicons (favicon-light.svg, favicon-dark.svg)
- Made ThoughtGalaxy 3D visualization theme-aware:
  - Dynamic node colors based on theme
  - Theme-aware lighting intensity
  - Theme-aware link colors
  - Theme-aware text labels
- Added comprehensive Playwright tests for theme functionality
- Theme preference persists via localStorage

Tested manually with Playwright MCP:
- ✅ Theme toggle switches between light and dark modes
- ✅ Theme persists across page reloads
- ✅ Both modes render correctly with appropriate colors
- ✅ Icons change based on current theme (sun/moon)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/Navigation/DesktopSidebar.tsx

@@ -13,6 +13,7 @@ import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icon
 import { useSelector } from '@xstate/react';
 import { useAppMachine } from '@/hooks/useAppMachine';
 import { UserMenu } from '@/components/UserMenu';
+import { ThemeToggle } from '@/components/ThemeToggle';
 
 export function DesktopSidebar() {
   const actor = useAppMachine();
@@ -111,6 +112,9 @@ export function DesktopSidebar() {
 
         <Divider my="md" color="#373A40" />
 
+        {/* Theme Toggle */}
+        <ThemeToggle />
+
         {/* User Menu - styled like other nav items */}
         <UserMenu showLabel={true} />
 

components/ThemeToggle.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from '@mantine/core';
+import { IconSun, IconMoon } from '@tabler/icons-react';
+
+/**
+ * ThemeToggle Component
+ *
+ * Toggles between light and dark color schemes.
+ * Uses Mantine's built-in color scheme hooks for state management and persistence.
+ */
+export function ThemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('light');
+
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <ActionIcon
+      onClick={toggleColorScheme}
+      variant="subtle"
+      size="lg"
+      aria-label="Toggle color scheme"
+      title={`Switch to ${computedColorScheme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      {computedColorScheme === 'dark' ? (
+        <IconSun size={20} />
+      ) : (
+        <IconMoon size={20} />
+      )}
+    </ActionIcon>
+  );
+}

components/ThoughtGalaxy.tsx

@@ -7,7 +7,7 @@ import {
   Text,
 } from '@react-three/drei';
 import { Suspense, useEffect, useRef, useState } from 'react';
-import { Stack, Text as MantineText, Paper, Title, Box, CloseButton, Group, Anchor } from '@mantine/core';
+import { Stack, Text as MantineText, Paper, Title, Box, CloseButton, Group, Anchor, useComputedColorScheme } from '@mantine/core';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import * as THREE from 'three';
 
@@ -30,17 +30,24 @@ interface LinkData {
 function Node({
   node,
   isFocused,
-  onNodeClick
+  onNodeClick,
+  isDark
 }: {
   node: NodeData;
   isFocused: boolean;
   onNodeClick: (node: NodeData) => void;
+  isDark: boolean;
 }) {
   const [hovered, setHovered] = useState(false);
 
   const isExpanded = isFocused || hovered;
   const scale = isFocused ? 2.5 : 1;
 
+  // Theme-aware colors
+  const nodeColor = isDark ? '#e9ecef' : '#495057';
+  const focusColor = '#4dabf7';
+  const hoverColor = '#90c0ff';
+
   return (
     <mesh
       position={node.coords_3d}
@@ -57,8 +64,8 @@ function Node({
     >
       <sphereGeometry args={[0.1, 32, 32]} />
       <meshStandardMaterial
-        color={isFocused ? '#4dabf7' : (hovered ? '#90c0ff' : '#e9ecef')}
-        emissive={isFocused ? '#4dabf7' : (hovered ? '#90c0ff' : '#e9ecef')}
+        color={isFocused ? focusColor : (hovered ? hoverColor : nodeColor)}
+        emissive={isFocused ? focusColor : (hovered ? hoverColor : nodeColor)}
         emissiveIntensity={isFocused ? 0.8 : (hovered ? 0.5 : 0.1)}
       />
       {/* Show title on hover or focus */}
@@ -66,7 +73,7 @@ function Node({
         <Text
           position={[0, 0.3 / scale, 0]}
           fontSize={0.1 / scale}
-          color="white"
+          color={isDark ? 'white' : 'black'}
           anchorX="center"
           anchorY="middle"
         >
@@ -82,6 +89,9 @@ export function ThoughtGalaxy() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const colorScheme = useComputedColorScheme('light');
+  const isDark = colorScheme === 'dark';
+
   const [nodes, setNodes] = useState<NodeData[]>([]);
   const [links, setLinks] = useState<LinkData[]>([]);
   const [selectedNode, setSelectedNode] = useState<NodeData | null>(null);
@@ -353,8 +363,9 @@ export function ThoughtGalaxy() {
           }
         }}
       >
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} intensity={1} />
+      {/* Theme-aware lighting */}
+      <ambientLight intensity={isDark ? 0.3 : 0.5} />
+      <pointLight position={[10, 10, 10]} intensity={isDark ? 0.8 : 1} />
       <CameraControls ref={cameraControlsRef} />
 
       <Suspense fallback={null}>
@@ -366,15 +377,16 @@ export function ThoughtGalaxy() {
               node={node}
               isFocused={selectedNodeId === node.id || selectedNode?.id === node.id}
               onNodeClick={handleNodeClick}
+              isDark={isDark}
             />
           ))}
 
-          {/* Render all links */}
+          {/* Render all links - theme-aware colors */}
           {linkLines.map((line, i) => (
             <Line
               key={i}
               points={[line.start, line.end]}
-              color="#495057" // gray
+              color={isDark ? '#495057' : '#adb5bd'}
               lineWidth={1}
             />
           ))}