feat: add dark mode support v2

public/styles.css

@@ -1,11 +1,22 @@
 :root {
-    --bg: #1a1a1a;
-    --fg: #e0e0e0;
-    --border: #444;
+    --bg: #f5f7fb;
+    --fg: #1f2937;
+    --border: #c8d1df;
     --primary: #3498db;
     --secondary: #2ecc71;
     --danger: #e74c3c;
     --warning: #f39c12;
+    --dark: #1f2937;
+    --light: #f8fafc;
+    --card-bg: #ffffff;
+    --card-fg: #111827;
+    --modal-bg: rgba(0, 0, 0, 0.45);
+}
+
+:root[data-theme='dark'] {
+    --bg: #1a1a1a;
+    --fg: #e0e0e0;
+    --border: #444;
     --dark: #121212;
     --light: #f0f0f0;
     --card-bg: #2a2a2a;
@@ -13,6 +24,19 @@
     --modal-bg: rgba(0, 0, 0, 0.7);
 }
 
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        --bg: #1a1a1a;
+        --fg: #e0e0e0;
+        --border: #444;
+        --dark: #121212;
+        --light: #f0f0f0;
+        --card-bg: #2a2a2a;
+        --card-fg: #e0e0e0;
+        --modal-bg: rgba(0, 0, 0, 0.7);
+    }
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -24,6 +48,11 @@ body {
     background-color: var(--bg);
     color: var(--fg);
     line-height: 1.6;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+body * {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .container {
@@ -48,6 +77,7 @@ header h1 {
 nav {
     display: flex;
     gap: 15px;
+    align-items: center;
 }
 
 .nav-link {
@@ -67,6 +97,10 @@ nav {
     color: white;
 }
 
+#theme-toggle {
+    margin-left: auto;
+}
+
 /* Buttons */
 .btn-primary {
     background-color: var(--primary);