style: improve UI with better contrast and visible theme toggle

nolancacheux · nolancacheux · commit 9967ecf51a02 · 2026-01-17T20:29:49.000+01:00
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -6,22 +6,23 @@
 
 /* Light Theme (Default) */
 :root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8fafc;
+  --bg-primary: #f8fafc;
+  --bg-secondary: #ffffff;
   --bg-tertiary: #f1f5f9;
   --bg-elevated: #e2e8f0;
   --text-primary: #1e293b;
   --text-secondary: #475569;
-  --text-muted: #94a3b8;
+  --text-muted: #64748b;
   --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;
+  --border-color: rgba(0, 0, 0, 0.12);
+  --border-hover: rgba(0, 0, 0, 0.2);
+  --glass-bg: rgba(255, 255, 255, 0.95);
+  --shadow-color: rgba(0, 0, 0, 0.08);
+  --code-bg: #f1f5f9;
+  --section-divider: #e2e8f0;
 }
 
 /* Dark Theme */
@@ -37,11 +38,12 @@
   --accent-secondary: #10b981;
   --accent-warning: #f59e0b;
   --accent-danger: #ef4444;
-  --border-color: rgba(255, 255, 255, 0.08);
-  --border-hover: rgba(255, 255, 255, 0.15);
+  --border-color: rgba(255, 255, 255, 0.1);
+  --border-hover: rgba(255, 255, 255, 0.2);
   --glass-bg: rgba(26, 31, 38, 0.95);
   --shadow-color: rgba(0, 0, 0, 0.3);
   --code-bg: #0f1419;
+  --section-divider: #2d353f;
 }
 
 * {
@@ -59,6 +61,10 @@ body {
   overflow: hidden;
 }
 
+* {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,8 +19,8 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className="antialiased">
+    <html lang="en" suppressHydrationWarning>
+      <body className="antialiased" suppressHydrationWarning>
         {children}
       </body>
     </html>
diff --git a/src/components/3d/NetworkVisualization.tsx b/src/components/3d/NetworkVisualization.tsx
@@ -378,7 +378,6 @@ export default function NetworkVisualization() {
 
         {/* Scene */}
         <NetworkScene />
-        <GridFloor />
 
         {/* Background stars effect - dark mode only */}
         <BackgroundStars />
diff --git a/src/components/NeuralNetworkVisualizer.tsx b/src/components/NeuralNetworkVisualizer.tsx
@@ -129,7 +129,7 @@ function HeaderBar({ isMobile }: { isMobile: boolean }) {
         {/* 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)]"
+          className="p-2 rounded-lg bg-[var(--bg-tertiary)] border border-[var(--border-color)] hover:bg-[var(--bg-elevated)] transition-colors text-[var(--text-primary)]"
           aria-label={`Switch to ${ui.theme === 'light' ? 'dark' : 'light'} mode`}
           title={`Switch to ${ui.theme === 'light' ? 'dark' : 'light'} mode`}
         >
@@ -244,14 +244,21 @@ function useKeyboardShortcuts() {
 // Hook to apply theme to document
 function useTheme() {
   const theme = useNetworkStore(state => state.ui.theme);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
     if (theme === 'dark') {
       document.documentElement.setAttribute('data-theme', 'dark');
     } else {
       document.documentElement.removeAttribute('data-theme');
     }
-  }, [theme]);
+  }, [theme, mounted]);
 }
 
 // Main component
