feat: add light/dark mode toggle with light as default

Author: nolancacheux

src/app/globals.css

@@ -4,8 +4,28 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Professional Dark Theme */
+/* Light Theme (Default) */
 :root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --bg-elevated: #e2e8f0;
+  --text-primary: #1e293b;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --accent-primary: #3b82f6;
+  --accent-secondary: #10b981;
+  --accent-warning: #f59e0b;
+  --accent-danger: #ef4444;
+  --border-color: rgba(0, 0, 0, 0.08);
+  --border-hover: rgba(0, 0, 0, 0.15);
+  --glass-bg: rgba(255, 255, 255, 0.9);
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --code-bg: #f8fafc;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
   --bg-primary: #0f1419;
   --bg-secondary: #1a1f26;
   --bg-tertiary: #242b33;
@@ -19,6 +39,9 @@
   --accent-danger: #ef4444;
   --border-color: rgba(255, 255, 255, 0.08);
   --border-hover: rgba(255, 255, 255, 0.15);
+  --glass-bg: rgba(26, 31, 38, 0.95);
+  --shadow-color: rgba(0, 0, 0, 0.3);
+  --code-bg: #0f1419;
 }
 
 * {
@@ -65,17 +88,19 @@ body {
 
 /* Glass Morphism - Simplified */
 .glass {
-  background: rgba(26, 31, 38, 0.95);
+  background: var(--glass-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border-color);
+  box-shadow: 0 4px 6px -1px var(--shadow-color);
 }
 
 .glass-strong {
-  background: rgba(26, 31, 38, 0.98);
+  background: var(--glass-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--border-color);
+  box-shadow: 0 4px 6px -1px var(--shadow-color);
 }
 
 /* Professional Button Styles */
@@ -107,18 +132,28 @@ body {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.8125rem;
   line-height: 1.6;
-  background: var(--bg-primary);
+  background: var(--code-bg);
   border: 1px solid var(--border-color);
   border-radius: 8px;
 }
 
-.code-block .keyword { color: #c792ea; }
-.code-block .function { color: #82aaff; }
-.code-block .string { color: #c3e88d; }
-.code-block .number { color: #f78c6c; }
-.code-block .comment { color: #546e7a; }
-.code-block .class { color: #ffcb6b; }
-.code-block .operator { color: #89ddff; }
+/* Light mode code syntax */
+.code-block .keyword { color: #7c3aed; }
+.code-block .function { color: #2563eb; }
+.code-block .string { color: #059669; }
+.code-block .number { color: #dc2626; }
+.code-block .comment { color: #6b7280; }
+.code-block .class { color: #d97706; }
+.code-block .operator { color: #0891b2; }
+
+/* Dark mode code syntax */
+[data-theme="dark"] .code-block .keyword { color: #c792ea; }
+[data-theme="dark"] .code-block .function { color: #82aaff; }
+[data-theme="dark"] .code-block .string { color: #c3e88d; }
+[data-theme="dark"] .code-block .number { color: #f78c6c; }
+[data-theme="dark"] .code-block .comment { color: #546e7a; }
+[data-theme="dark"] .code-block .class { color: #ffcb6b; }
+[data-theme="dark"] .code-block .operator { color: #89ddff; }
 
 /* KaTeX */
 .katex {

src/components/3d/NetworkVisualization.tsx

@@ -111,7 +111,7 @@ function Connection({
 }
 
 // Layer visualization
-function LayerVisualization({ 
+function LayerVisualization({
   layerIndex,
   neurons,
   type,
@@ -131,59 +131,59 @@ function LayerVisualization({
   const displayNeurons = Math.min(neurons, 8);
   const spacing = 0.7;
   const startY = ((displayNeurons - 1) * spacing) / 2;
-  
+
   const positions: [number, number, number][] = useMemo(() => {
     return Array.from({ length: displayNeurons }, (_, i) => [
       xPosition,
       startY - i * spacing,
       0
     ] as [number, number, number]);
   }, [displayNeurons, xPosition, startY, spacing]);
-  
+
   return (
     <group>
       {positions.map((pos, i) => (
-        <Neuron 
-          key={i} 
-          position={pos} 
+        <Neuron
+          key={i}
+          position={pos}
           color={color}
           size={0.25}
           pulseSpeed={2 + layerIndex * 0.5}
         />
       ))}
-      
+
       {/* Layer label using Html */}
       <Html
         position={[xPosition, startY + 1, 0]}
         center
-        style={{ 
+        style={{
           pointerEvents: 'none',
           userSelect: 'none'
         }}
       >
         <div className="text-center whitespace-nowrap">
-          <div className={`text-sm font-bold ${isSelected ? 'text-cyan-400' : 'text-white'}`}>
+          <div className={`text-sm font-bold ${isSelected ? 'text-cyan-400' : 'text-[var(--text-primary)]'}`}>
             {name}
           </div>
-          <div className="text-xs text-gray-400">
-            {type === 'dense' ? `${neurons} units` : 
+          <div className="text-xs text-[var(--text-muted)]">
+            {type === 'dense' ? `${neurons} units` :
              type === 'conv2d' ? `${neurons} filters` :
              type === 'input' ? 'Input' : ''}
           </div>
         </div>
       </Html>
-      
+
       {/* Ellipsis for more neurons */}
       {neurons > 8 && (
         <Html
           position={[xPosition, -startY - 0.8, 0]}
           center
           style={{ pointerEvents: 'none' }}
         >
-          <div className="text-gray-400 text-lg">⋮</div>
+          <div className="text-[var(--text-muted)] text-lg">⋮</div>
         </Html>
       )}
-      
+
       {/* Selection ring */}
       {isSelected && (
         <mesh rotation={[Math.PI / 2, 0, 0]} position={[xPosition, 0, 0]}>
@@ -299,64 +299,89 @@ function NetworkScene() {
   );
 }
 
-// Grid floor
+// Grid floor - adapts to theme
 function GridFloor() {
+  const theme = useNetworkStore(state => state.ui.theme);
+  const gridColor = theme === 'dark' ? '#0a0a0f' : '#e2e8f0';
+  const opacity = theme === 'dark' ? 0.3 : 0.5;
+
   return (
     <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -3, 0]} receiveShadow>
       <planeGeometry args={[50, 50, 50, 50]} />
-      <meshStandardMaterial 
-        color="#0a0a0f"
+      <meshStandardMaterial
+        color={gridColor}
         wireframe
         transparent
-        opacity={0.3}
+        opacity={opacity}
       />
     </mesh>
   );
 }
 
+// Background stars - only shown in dark mode
+function BackgroundStars() {
+  const theme = useNetworkStore(state => state.ui.theme);
+
+  // Use useMemo to generate consistent star positions (must be called before any early returns)
+  const stars = useMemo(() => {
+    return Array.from({ length: 100 }).map((_, i) => ({
+      position: [
+        (Math.sin(i * 1.234) * 0.5) * 40,
+        (Math.cos(i * 2.345) * 0.5) * 40,
+        -20 - (Math.sin(i * 3.456) * 0.5 + 0.5) * 20
+      ] as [number, number, number],
+      size: 0.02 + (Math.sin(i * 4.567) * 0.5 + 0.5) * 0.03,
+      opacity: 0.5 + (Math.cos(i * 5.678) * 0.5 + 0.5) * 0.5
+    }));
+  }, []);
+
+  if (theme !== 'dark') return null;
+
+  return (
+    <>
+      {stars.map((star, i) => (
+        <mesh key={i} position={star.position}>
+          <sphereGeometry args={[star.size, 8, 8]} />
+          <meshBasicMaterial color="#ffffff" transparent opacity={star.opacity} />
+        </mesh>
+      ))}
+    </>
+  );
+}
+
 // Main component
 export default function NetworkVisualization() {
+  const theme = useNetworkStore(state => state.ui.theme);
+
   return (
     <div className="w-full h-full">
       <Canvas
         camera={{ position: [0, 3, 12], fov: 50 }}
         gl={{ antialias: true, alpha: true }}
         style={{ background: 'transparent' }}
       >
-        {/* Lighting */}
-        <ambientLight intensity={0.5} />
-        <pointLight position={[10, 10, 10]} intensity={1} color="#ffffff" />
+        {/* Lighting - adjusted for theme */}
+        <ambientLight intensity={theme === 'dark' ? 0.5 : 0.8} />
+        <pointLight position={[10, 10, 10]} intensity={theme === 'dark' ? 1 : 0.8} color="#ffffff" />
         <pointLight position={[-10, 5, -10]} intensity={0.5} color="#a855f7" />
         <pointLight position={[0, -5, 5]} intensity={0.3} color="#00d4ff" />
-        
+
         {/* Controls */}
-        <OrbitControls 
+        <OrbitControls
           enablePan={true}
           enableZoom={true}
           enableRotate={true}
           minDistance={5}
           maxDistance={30}
           target={[0, 0, 0]}
         />
-        
+
         {/* Scene */}
         <NetworkScene />
         <GridFloor />
-        
-        {/* Background stars effect */}
-        {Array.from({ length: 100 }).map((_, i) => (
-          <mesh 
-            key={i} 
-            position={[
-              (Math.random() - 0.5) * 40,
-              (Math.random() - 0.5) * 40,
-              -20 - Math.random() * 20
-            ]}
-          >
-            <sphereGeometry args={[0.02 + Math.random() * 0.03, 8, 8]} />
-            <meshBasicMaterial color="#ffffff" transparent opacity={0.5 + Math.random() * 0.5} />
-          </mesh>
-        ))}
+
+        {/* Background stars effect - dark mode only */}
+        <BackgroundStars />
       </Canvas>
     </div>
   );

src/components/NeuralNetworkVisualizer.tsx

@@ -52,9 +52,14 @@ function HeaderBar({ isMobile }: { isMobile: boolean }) {
     training,
     toggleLeftPanel,
     toggleRightPanel,
-    getTotalParameters
+    getTotalParameters,
+    setTheme
   } = useNetworkStore();
 
+  const toggleTheme = () => {
+    setTheme(ui.theme === 'light' ? 'dark' : 'light');
+  };
+
   return (
     <header className="fixed top-0 left-0 right-0 h-14 glass z-30 flex items-center justify-between px-2 sm:px-4">
       {/* Left: Toggle sidebar */}
@@ -115,12 +120,30 @@ function HeaderBar({ isMobile }: { isMobile: boolean }) {
         )}
       </div>
 
-      {/* Right: Toggle right panel + Credit */}
-      <div className="flex items-center gap-3">
+      {/* Right: Theme toggle + GitHub + Toggle right panel */}
+      <div className="flex items-center gap-2 sm:gap-3">
         <span className="hidden lg:block text-xs text-[var(--text-muted)]">
           ML Engineer Portfolio Project
         </span>
-        
+
+        {/* Theme Toggle */}
+        <button
+          onClick={toggleTheme}
+          className="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          aria-label={`Switch to ${ui.theme === 'light' ? 'dark' : 'light'} mode`}
+          title={`Switch to ${ui.theme === 'light' ? 'dark' : 'light'} mode`}
+        >
+          {ui.theme === 'light' ? (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+          ) : (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+          )}
+        </button>
+
         <a
           href="https://github.com/nolancacheux"
           target="_blank"
@@ -218,13 +241,27 @@ function useKeyboardShortcuts() {
   }, [handleKeyDown]);
 }
 
+// Hook to apply theme to document
+function useTheme() {
+  const theme = useNetworkStore(state => state.ui.theme);
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  }, [theme]);
+}
+
 // Main component
 export default function NeuralNetworkVisualizer() {
   const { ui, toggleLeftPanel, toggleRightPanel } = useNetworkStore();
   const isMobile = useIsMobile();
 
-  // Register keyboard shortcuts
+  // Register keyboard shortcuts and theme
   useKeyboardShortcuts();
+  useTheme();
 
   // Calculate main content margins based on panel states (desktop only)
   const mainStyles = isMobile ? {} : {

src/store/networkStore.ts

@@ -268,7 +268,7 @@ const initialState = {
     rightPanelTab: 'parameters' as const,
     isTourActive: false,
     currentTourStep: 0,
-    theme: 'dark' as const
+    theme: 'light' as const
   }
 };