From 008201aa8429fb59d9d77aefa1094589225599fc Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Sat, 5 Jul 2025 19:25:49 -0400
Subject: [PATCH] Fix dark mode auto theme detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add CSS media query for prefers-color-scheme detection
- Auto theme now properly follows system dark/light preference
- Maintains 3-mode cycle: auto → light → dark → auto
- Rebuilds CSS with proper @media rules for [data-theme="auto"]

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/scss/main.scss | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/scss/main.scss b/src/scss/main.scss
index 4c15bf3..7ea0cdf 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -42,6 +42,31 @@ $status-info: #3b82f6;
   --primary-hover: #{$secondary-color};
 }
 
+// Auto theme (follows system preference)
+@media (prefers-color-scheme: dark) {
+  [data-theme="auto"] {
+    /* Dark theme when system prefers dark */
+    --background-color: #{$dark-bg};
+    --text-color: #{$dark-text};
+    --card-bg: #{$dark-card-bg};
+    --border-color: #{$dark-border};
+    --input-bg: #{$dark-card-bg};
+    --input-border: #{$dark-border};
+    --table-header-bg: #3d3d3d;
+    --table-hover: #3d3d3d;
+    --shadow: rgba(0, 0, 0, 0.3);
+    
+    /* Dark theme additional variables */
+    --bg-secondary: #{$dark-card-bg};
+    --bg-hover: #4b5563;
+    --link-color: #60a5fa;
+    --link-hover: #93c5fd;
+    --text-secondary: #9ca3af;
+    --primary-color: #{$primary-color};
+    --primary-hover: #{$secondary-color};
+  }
+}
+
 [data-theme="dark"] {
   /* Dark theme */
   --background-color: #{$dark-bg};