Merge pull request #12 from GustyCube/copilot/add-dark-light-theme-toggle

Add dark/light theme toggle with localStorage persistence

Author: GustyCube

frontend/css/styles.css

@@ -24,6 +24,21 @@
     --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* Light theme variables */
+:root[data-theme="light"] {
+    --bg-void: #ffffff;
+    --bg-panel: #f5f5f5;
+    --text-primary: #1a1a1a;
+    --text-muted: #666666;
+
+    --accent-signal: #00c853;
+    --accent-error: #d32f2f;
+    --accent-haze: #00c85320;
+
+    --border-dim: #e0e0e0;
+    --border-bright: #cccccc;
+}
+
 /* RESET & BASE */
 *,
 *::before,
@@ -62,6 +77,10 @@ body {
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
 }
 
+:root[data-theme="light"] .noise-overlay {
+    opacity: 0.02;
+}
+
 .erreval-haze {
     position: fixed;
     top: -50%;
@@ -117,6 +136,10 @@ a:hover {
     /* Highest */
 }
 
+:root[data-theme="light"] .site-header {
+    background: rgba(255, 255, 255, 0.85);
+}
+
 .logo-type {
     font-size: 4rem;
     line-height: 0.8;
@@ -154,6 +177,35 @@ a:hover {
 .site-nav {
     display: flex;
     gap: 2rem;
+    align-items: center;
+}
+
+/* Theme Toggle Button */
+.theme-toggle {
+    background: transparent;
+    border: 1px solid var(--border-dim);
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    transition: all 0.3s var(--ease-out-expo);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 4px;
+}
+
+.theme-toggle:hover {
+    border-color: var(--accent-signal);
+    color: var(--accent-signal);
+}
+
+.theme-toggle svg {
+    width: 18px;
+    height: 18px;
 }
 
 .nav-link {
@@ -356,6 +408,10 @@ select:focus {
     background-color: #ffffff;
 }
 
+:root[data-theme="light"] .legend-dot.white {
+    background-color: #1a1a1a;
+}
+
 .legend-dot.grey {
     background-color: var(--text-muted);
 }

frontend/index.html

@@ -43,6 +43,13 @@ <h1 class="logo-type">ERR-EVAL</h1>
                     </path>
                 </svg>
             </a>
+            <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+                <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path class="sun-icon" 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" style="display: none;"></path>
+                    <path class="moon-icon" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+                </svg>
+            </button>
         </nav>
     </header>