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>

src/layouts/BaseLayout.astro

@@ -1,10 +1,12 @@
 ---
 import '@styles/main.css';
+import ThemeSwitcher from '@components/ThemeSwitcher.astro';
 ---
 
 <style>
     header {
         background-color: var(--primary-color-faded);
+        border-bottom: var(--header-border-width) solid var(--header-border-color);
     }
 
     nav {
@@ -26,6 +28,7 @@ import '@styles/main.css';
 
             &:hover {
                 background: var(--nav-hover);
+                color: var(--nav-hover-color);
             }
         }
     }
@@ -45,6 +48,8 @@ import '@styles/main.css';
             </nav>
         </header>
 
+        <ThemeSwitcher />
+
         <main>
             <slot />
         </main>

src/styles/vars.css

@@ -13,14 +13,126 @@
     --accent-color: hsl(0deg 92% 29%);
     --accent-color-faded: hsl(0deg 25% 55%);
     --nav-hover: hsl(0deg 0% 0% / 10%);
+    --nav-hover-color: white;
+    --header-border-width: 0;
+    --header-border-color: transparent;
 
     @media(max-width: 640px) {
         --content-line-height: 1.25;
         --content-size: 1.15rem;
         --content-size-sm: 0.9rem;
     }
+}
 
-    @media(prefers-color-scheme: dark) {
+/* v1: Cool */
+[data-theme="cool"] {
+    --bg-color: hsl(210deg 12% 12%);
+    --content-color: hsl(0deg 0% 82%);
+    --content-color-faded: hsl(0deg 0% 60%);
+    --heading-color: hsl(0deg 0% 90%);
+    --primary-color: hsl(202deg 50% 50%);
+    --primary-color-faded: hsl(202deg 14% 22%);
+    --accent-color: hsl(0deg 72% 55%);
+    --accent-color-faded: hsl(0deg 20% 60%);
+    --nav-hover: hsl(0deg 0% 100% / 12%);
+}
+
+/* v2: Warm Terracotta */
+[data-theme="warm"] {
+    --bg-color: hsl(30deg 10% 12%);
+    --content-color: hsl(35deg 15% 80%);
+    --content-color-faded: hsl(30deg 8% 55%);
+    --heading-color: hsl(35deg 20% 88%);
+    --primary-color: hsl(35deg 40% 50%);
+    --primary-color-faded: hsl(30deg 12% 20%);
+    --accent-color: hsl(20deg 75% 55%);
+    --accent-color-faded: hsl(20deg 25% 55%);
+    --nav-hover: hsl(35deg 20% 100% / 12%);
+}
+
+/* v3: Blue Everything */
+[data-theme="blue"] {
+    --bg-color: hsl(220deg 18% 11%);
+    --content-color: hsl(215deg 10% 78%);
+    --content-color-faded: hsl(215deg 6% 55%);
+    --heading-color: hsl(210deg 15% 90%);
+    --primary-color: hsl(215deg 60% 50%);
+    --primary-color-faded: hsl(220deg 30% 22%);
+    --accent-color: hsl(210deg 90% 60%);
+    --accent-color-faded: hsl(210deg 35% 55%);
+    --nav-hover: hsl(210deg 30% 100% / 12%);
+}
+
+/* v4: Blue + Gold */
+[data-theme="blue-gold"] {
+    --bg-color: hsl(220deg 18% 11%);
+    --content-color: hsl(215deg 10% 78%);
+    --content-color-faded: hsl(215deg 6% 55%);
+    --heading-color: hsl(210deg 15% 90%);
+    --primary-color: hsl(215deg 60% 50%);
+    --primary-color-faded: hsl(220deg 30% 22%);
+    --accent-color: hsl(45deg 85% 55%);
+    --accent-color-faded: hsl(45deg 35% 50%);
+    --nav-hover: hsl(210deg 30% 100% / 12%);
+}
+
+/* v5: Blue + Salmon */
+[data-theme="salmon"] {
+    --bg-color: hsl(220deg 18% 11%);
+    --content-color: hsl(215deg 10% 78%);
+    --content-color-faded: hsl(215deg 6% 55%);
+    --heading-color: hsl(210deg 15% 90%);
+    --primary-color: hsl(215deg 60% 50%);
+    --primary-color-faded: hsl(220deg 30% 22%);
+    --accent-color: hsl(10deg 80% 65%);
+    --accent-color-faded: hsl(10deg 30% 55%);
+    --nav-hover: hsl(210deg 30% 100% / 12%);
+}
+
+/* v6: Midnight Garden */
+[data-theme="midnight-garden"] {
+    --bg-color: hsl(160deg 15% 9%);
+    --content-color: hsl(100deg 8% 78%);
+    --content-color-faded: hsl(110deg 5% 52%);
+    --heading-color: hsl(45deg 20% 90%);
+    --primary-color: hsl(155deg 30% 35%);
+    --primary-color-faded: hsl(155deg 20% 14%);
+    --accent-color: hsl(340deg 45% 65%);
+    --accent-color-faded: hsl(340deg 20% 50%);
+    --nav-hover: hsl(155deg 15% 100% / 10%);
+}
+
+/* v7: Stormfront */
+[data-theme="stormfront"] {
+    --bg-color: hsl(0deg 0% 8%);
+    --content-color: hsl(0deg 0% 75%);
+    --content-color-faded: hsl(0deg 0% 50%);
+    --heading-color: hsl(0deg 0% 95%);
+    --primary-color: hsl(270deg 60% 60%);
+    --primary-color-faded: hsl(0deg 0% 8%);
+    --accent-color: hsl(270deg 75% 65%);
+    --accent-color-faded: hsl(270deg 25% 50%);
+    --nav-hover: hsl(270deg 30% 100% / 10%);
+    --nav-hover-color: var(--accent-color);
+    --header-border-width: 2px;
+    --header-border-color: var(--accent-color);
+}
+
+/* v8: Copper & Slate */
+[data-theme="copper-slate"] {
+    --bg-color: hsl(220deg 10% 13%);
+    --content-color: hsl(30deg 10% 75%);
+    --content-color-faded: hsl(25deg 6% 50%);
+    --heading-color: hsl(35deg 25% 88%);
+    --primary-color: hsl(220deg 15% 40%);
+    --primary-color-faded: hsl(220deg 12% 18%);
+    --accent-color: hsl(18deg 70% 55%);
+    --accent-color-faded: hsl(18deg 30% 45%);
+    --nav-hover: hsl(20deg 15% 100% / 10%);
+}
+
+/* v9: Northern Lights */
+[data-theme="northern-lights"] {
     --bg-color: hsl(230deg 20% 10%);
     --content-color: hsl(200deg 12% 75%);
     --content-color-faded: hsl(200deg 8% 50%);
@@ -31,4 +143,3 @@
     --accent-color-faded: hsl(175deg 25% 42%);
     --nav-hover: hsl(175deg 20% 100% / 10%);
 }
-}