Add theme toggle

hdyc-svelte/src/app.css

@@ -17,6 +17,7 @@
   --accent-dark:  #059669;
   --accent-glow:  rgba(16, 185, 129, 0.15);
   --accent-gradient: linear-gradient(135deg, #10b981, #06b6d4);
+  --header-bg: rgba(12, 15, 20, 0.85);
 
   /* ─── Typography ──────────────────────────────────────── */
   --font-body:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -26,6 +27,23 @@
   --header-h:   64px;
 }
 
+:root[data-theme='light'] {
+  --bg: #f8fafc;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #ffffff;
+  --input-bg: rgba(15, 23, 42, 0.04);
+  --hover-bg: rgba(15, 23, 42, 0.08);
+  --border: rgba(15, 23, 42, 0.12);
+  --text: #0f172a;
+  --text-muted: #475569;
+  --accent: #047857;
+  --accent-dark: #065f46;
+  --accent-glow: rgba(16, 185, 129, 0.15);
+  --accent-gradient: linear-gradient(135deg, #10b981, #06b6d4);
+  --header-bg: rgba(255, 255, 255, 0.95);
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -66,7 +84,7 @@ a:hover {
   align-items: center;
   justify-content: space-between;
   padding: 0 1.5rem;
-  background: rgba(12, 15, 20, 0.85);
+  background: var(--header-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
@@ -92,6 +110,43 @@ a:hover {
   gap: 1rem;
 }
 
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  color: var(--text);
+  font-weight: 600;
+  font-size: 0.85rem;
+  font-family: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.theme-toggle:hover {
+  border-color: var(--accent);
+}
+.theme-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+.theme-toggle__label {
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+}
+
+@media (max-width: 520px) {
+  .theme-toggle__label {
+    display: none;
+  }
+  .theme-toggle {
+    padding-inline: 0.75rem;
+  }
+}
+
 .hamburger {
   display: none;
   background: none;