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;

hdyc-svelte/src/routes/+layout.svelte

@@ -1,9 +1,54 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
+  import { onMount } from 'svelte';
+
   import '../app.css';
   import Sidebar from '$lib/components/Sidebar.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
 
   let sidebarOpen = false;
+  let theme: 'light' | 'dark' = 'dark';
+
+  const applyTheme = (value: 'light' | 'dark') => {
+    theme = value;
+    if (!browser) return;
+    document.documentElement.dataset.theme = value;
+    window.localStorage.setItem('theme', value);
+  };
+
+  const toggleTheme = () => {
+    applyTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  onMount(() => {
+    if (!browser) return;
+
+    const savedTheme = window.localStorage.getItem('theme') as 'light' | 'dark' | null;
+    const initialTheme = savedTheme ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    applyTheme(initialTheme);
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handlePreferenceChange = (event: MediaQueryListEvent) => {
+      if (window.localStorage.getItem('theme')) return;
+      applyTheme(event.matches ? 'dark' : 'light');
+    };
+
+    const cleanup = () => {
+      if ('removeEventListener' in mediaQuery) {
+        mediaQuery.removeEventListener('change', handlePreferenceChange);
+      } else {
+        mediaQuery.removeListener(handlePreferenceChange);
+      }
+    };
+
+    if ('addEventListener' in mediaQuery) {
+      mediaQuery.addEventListener('change', handlePreferenceChange);
+    } else {
+      mediaQuery.addListener(handlePreferenceChange);
+    }
+
+    return cleanup;
+  });
 </script>
 
 <svelte:head>
@@ -22,6 +67,15 @@
   </div>
   <div class="header-right">
     <SearchBar />
+    <button
+      type="button"
+      class="theme-toggle"
+      on:click={toggleTheme}
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      <span aria-hidden="true">{theme === 'dark' ? '☀️' : '🌙'}</span>
+      <span class="theme-toggle__label">{theme === 'dark' ? 'Light' : 'Dark'} mode</span>
+    </button>
   </div>
 </header>