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};