all the themes together + switcher

src/components/ThemeSwitcher.astro

@@ -0,0 +1,66 @@
+---
+---
+
+<div class="theme-switcher">
+    <label for="theme-select">Theme</label>
+    <select id="theme-select">
+        <option value="">Light</option>
+        <option value="cool">Cool</option>
+        <option value="warm">Warm Terracotta</option>
+        <option value="blue">Blue</option>
+        <option value="blue-gold">Blue + Gold</option>
+        <option value="salmon">Blue + Salmon</option>
+        <option value="midnight-garden">Midnight Garden</option>
+        <option value="stormfront">Stormfront</option>
+        <option value="copper-slate">Copper &amp; Slate</option>
+        <option value="northern-lights">Northern Lights</option>
+    </select>
+</div>
+
+<style>
+    .theme-switcher {
+        position: fixed;
+        top: 0.5rem;
+        right: 0.5rem;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--bg-color);
+        border: 1px solid var(--content-color-faded);
+        font-size: 0.75rem;
+    }
+
+    label {
+        color: var(--content-color-faded);
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    select {
+        background: var(--bg-color);
+        color: var(--content-color);
+        border: none;
+        font-size: 0.75rem;
+        font-family: inherit;
+        cursor: pointer;
+        padding: 0.1rem;
+    }
+</style>
+
+<script>
+    const select = document.getElementById('theme-select') as HTMLSelectElement;
+    const saved = localStorage.getItem('theme');
+    if (saved !== null) {
+        document.documentElement.setAttribute('data-theme', saved);
+        select.value = saved;
+    }
+    select.addEventListener('change', () => {
+        const theme = select.value;
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    });
+</script>