feat: implement dark/light mode with system detection

- Install and configure next-themes for theme management
- Add ThemeProvider wrapper component with suppressHydrationWarning
- Define light theme CSS variables (off-white backgrounds, green accents)
- Define dark theme CSS variables (hacker theme: terminal blacks, matrix green)
- Update scrollbar styles for both themes
- Add CRT scanline/glow effects (dark mode only)
- Create ThemeToggle component with system/light/dark cycling
- Add theme toggle to Toolbox sidebar
- Update CandleChart to apply theme-specific colors
- Chart colors update dynamically on theme change
- All components use CSS variables for theme compatibility
- FOUC prevention via next-themes inline script

src/app/globals.css

@@ -4,25 +4,50 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222 47% 11%;
-    --card: 0 0% 100%;
-    --card-foreground: 222 47% 11%;
+    /* Light theme - off-white backgrounds, green-600 accents, near-black text, gray borders */
+    --background: 120 25% 97%; /* #f8faf8 */
+    --foreground: 240 15% 10%; /* #1a1a2e near-black */
+    --card: 0 0% 100%; /* #ffffff */
+    --card-foreground: 240 15% 10%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222 47% 11%;
-    --primary: 221 83% 53%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222 47% 11%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215 16% 47%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222 47% 11%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214 32% 91%;
-    --input: 214 32% 91%;
-    --ring: 221 83% 53%;
+    --popover-foreground: 240 15% 10%;
+    --primary: 142 76% 36%; /* #16a34a green-600 */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 120 10% 95%; /* #f0f4f0 */
+    --secondary-foreground: 240 15% 10%;
+    --muted: 120 10% 95%;
+    --muted-foreground: 220 9% 46%; /* #4a5568 gray-600 */
+    --accent: 142 76% 36%; /* green-600 */
+    --accent-foreground: 0 0% 100%;
+    --destructive: 348 100% 50%; /* #ff0040 neon red */
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 13% 84%; /* #d1d5db gray-300 */
+    --input: 220 13% 84%;
+    --ring: 142 76% 36%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    /* Dark hacker theme - terminal blacks, matrix green #00ff41 accents, neon text */
+    --background: 120 38% 3%; /* #0a0e0a near-black */
+    --foreground: 120 100% 63%; /* #00ff41 matrix green */
+    --card: 120 29% 5%; /* #0d110d */
+    --card-foreground: 120 100% 63%;
+    --popover: 120 29% 5%;
+    --popover-foreground: 120 100% 63%;
+    --primary: 120 100% 63%; /* #00ff41 matrix green */
+    --primary-foreground: 120 38% 3%;
+    --secondary: 120 100% 50%; /* #00cc33 */
+    --secondary-foreground: 120 100% 63%;
+    --muted: 120 82% 10%; /* #003311 */
+    --muted-foreground: 120 100% 50%;
+    --accent: 120 100% 63%; /* #00ff41 */
+    --accent-foreground: 120 38% 3%;
+    --destructive: 348 100% 50%; /* #ff0040 neon red */
+    --destructive-foreground: 120 100% 63%;
+    --border: 120 82% 10%; /* #003311 inactive */
+    --input: 120 82% 10%;
+    --ring: 120 100% 63%;
     --radius: 0.5rem;
   }
 }
@@ -46,11 +71,87 @@
     width: 8px;
   }
   
+  /* Light mode scrollbar */
   ::-webkit-scrollbar-track {
-    @apply bg-muted;
+    background: hsl(var(--muted));
   }
   
   ::-webkit-scrollbar-thumb {
-    @apply bg-border hover:bg-muted-foreground/30 rounded;
+    background: hsl(var(--border));
+    border-radius: 4px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.5);
+  }
+  
+  /* Dark mode scrollbar */
+  .dark ::-webkit-scrollbar-track {
+    background: hsl(var(--muted));
+  }
+  
+  .dark ::-webkit-scrollbar-thumb {
+    background: hsl(var(--primary));
+    border-radius: 4px;
+  }
+  
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--secondary));
+  }
+}
+
+/* CRT effects - dark mode only */
+@layer utilities {
+  .dark .crt-scanlines {
+    position: relative;
+  }
+  
+  .dark .crt-scanlines::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      rgba(0, 0, 0, 0) 50%,
+      rgba(0, 0, 0, 0.05) 50%
+    );
+    background-size: 100% 4px;
+    pointer-events: none;
+    z-index: 1;
+  }
+  
+  .dark .neon-glow {
+    text-shadow: 0 0 10px hsl(var(--primary)),
+                 0 0 20px hsl(var(--primary) / 0.5),
+                 0 0 30px hsl(var(--primary) / 0.3);
+  }
+  
+  .dark .neon-glow-box {
+    box-shadow: 0 0 10px hsl(var(--primary)),
+                0 0 20px hsl(var(--primary) / 0.5);
+  }
+  
+  .dark .neon-glow-box:hover {
+    box-shadow: 0 0 15px hsl(var(--primary)),
+                0 0 30px hsl(var(--primary) / 0.6),
+                0 0 45px hsl(var(--primary) / 0.4);
+  }
+  
+  @keyframes pulse-glow {
+    0%, 100% {
+      box-shadow: 0 0 10px hsl(var(--primary)),
+                  0 0 20px hsl(var(--primary) / 0.5);
+    }
+    50% {
+      box-shadow: 0 0 20px hsl(var(--primary)),
+                  0 0 40px hsl(var(--primary) / 0.7),
+                  0 0 60px hsl(var(--primary) / 0.5);
+    }
+  }
+  
+  .dark .pulse-glow {
+    animation: pulse-glow 2s ease-in-out infinite;
   }
 }

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { ThemeProvider } from "@/components/ThemeProvider";
 
 export const metadata: Metadata = {
   title: "Candle Annotator",
@@ -12,14 +13,22 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <link
           href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
           rel="stylesheet"
         />
       </head>
-      <body className="antialiased">{children}</body>
+      <body className="antialiased">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+        >
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   );
 }