style: implement elegant dark mode and dynamic palette rotation

Author: Tinnci

src/App.tsx

@@ -32,6 +32,13 @@ const MotionA = motion.a as React.FC<React.AnchorHTMLAttributes<HTMLAnchorElemen
   children?: React.ReactNode;
 }>;
 
+const PALETTES = [
+  { a1: '#f472b6', a2: '#818cf8', a3: '#2dd4bf' }, // Cyberpunk
+  { a1: '#34d399', a2: '#60a5fa', a3: '#fbbf24' }, // Forest
+  { a1: '#a78bfa', a2: '#fb7185', a3: '#38bdf8' }, // Royal
+  { a1: '#fcd34d', a2: '#f87171', a3: '#c084fc' }, // Candy
+];
+
 // Theme Toggle Component
 const ThemeToggle = () => {
   const [isDark, setIsDark] = useState(() => {
@@ -43,8 +50,21 @@ const ThemeToggle = () => {
   });
 
   useEffect(() => {
-    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    const root = document.documentElement;
+    root.setAttribute('data-theme', isDark ? 'dark' : 'light');
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
+
+    if (isDark) {
+      const palette = PALETTES[Math.floor(Math.random() * PALETTES.length)];
+      root.style.setProperty('--accent-1', palette.a1);
+      root.style.setProperty('--accent-2', palette.a2);
+      root.style.setProperty('--accent-3', palette.a3);
+    } else {
+      // Reset to default neobrutalist bright colors in light mode
+      root.style.removeProperty('--accent-1');
+      root.style.removeProperty('--accent-2');
+      root.style.removeProperty('--accent-3');
+    }
   }, [isDark]);
 
   return (

src/index.css

@@ -1,5 +1,5 @@
 :root {
-  --bg: #f0f0f0;
+  --bg: #f8f9fa;
   --fg: #1a1a1a;
   --accent-1: #ff6b6b;
   --accent-2: #4ecdc4;
@@ -8,17 +8,41 @@
   --border: #000000;
   --shadow: #000000;
   --font-main: 'Inter', system-ui, -apple-system, sans-serif;
+  --accent-rgb-1: 255, 107, 107;
 }
 
 [data-theme="dark"] {
-  --bg: #1a1a1a;
-  --fg: #f0f0f0;
-  --accent-1: #ff6b6b;
-  --accent-2: #4ecdc4;
-  --accent-3: #ffe66d;
-  --card-bg: #2d2d2d;
-  --border: #f0f0f0;
+  --bg: #0a0a0a;
+  --fg: #e5e7eb;
+  --card-bg: #111111;
+  --border: #262626;
   --shadow: #000000;
+  /* Dynamic accents will override these */
+  --accent-1: #6366f1;
+  /* Indigo */
+  --accent-2: #10b981;
+  /* Emerald */
+  --accent-3: #f59e0b;
+  /* Amber */
+}
+
+[data-theme="dark"] .prose code {
+  background: #1f1f1f;
+  border: 1px solid #333;
+}
+
+[data-theme="dark"] .prose pre {
+  background: #000000;
+  border-color: var(--border);
+  box-shadow: 4px 4px 0 #000;
+}
+
+[data-theme="dark"] .prose blockquote {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+[data-theme="dark"] .bento-item:hover {
+  border-color: var(--accent-1);
 }
 
 * {