initial theme picker logic

src/assets/svg/paintbrush.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
+</svg>

src/components/Header/Drawer.astro

@@ -1,7 +1,6 @@
 ---
 import BarsIcon from "../../assets/svg/bars.svg";
 import CloseIcon from "../../assets/svg/xmark.svg";
-
 import { navLinks } from "../../data/nav-links";
 ---
 
@@ -40,10 +39,6 @@ import { navLinks } from "../../data/nav-links";
 </div>
 
 <style>
-  :root {
-    --transition: all 0.3s ease-in-out;
-  }
-
   .drawer-container {
     display: none;
   }
@@ -80,7 +75,7 @@ import { navLinks } from "../../data/nav-links";
   }
 
   nav {
-    text-align: center;
+    text-align: left;
     padding: 12px;
     display: flex;
     flex-direction: column;

src/components/Header/Header.astro

@@ -1,13 +1,17 @@
 ---
 import Drawer from "./Drawer.astro";
 import Nav from "./Nav.astro";
+import ThemeMenu from "./ThemeMenu.astro";
 ---
 
 <header>
   <div class="container">
     <a href="/">ghall.space</a>
-    <Nav />
-    <Drawer />
+    <div>
+      <Nav />
+      <ThemeMenu />
+      <Drawer />
+    </div>
   </div>
 </header>
 
@@ -15,8 +19,7 @@ import Nav from "./Nav.astro";
   header {
     margin-bottom: 20px;
     height: 70px;
-    background-color: rgba(252, 252, 252, 90%);
-    backdrop-filter: blur(10px);
+    background-color: var(--background);
     width: 100%;
     top: 0;
     position: fixed;
@@ -35,15 +38,14 @@ import Nav from "./Nav.astro";
     height: 100%;
   }
 
+  .container > div {
+    display: flex;
+    gap: 20px;
+  }
+
   a {
     font-size: 1.6rem;
     color: var(--text);
     font-weight: bold;
   }
-
-  @media (prefers-color-scheme: dark) {
-    header {
-      background-color: rgba(30, 30, 46, 90%);
-    }
-  }
 </style>

src/components/Header/ThemeMenu.astro

@@ -0,0 +1,90 @@
+---
+import BrushIcon from "../../assets/svg/paintbrush.svg";
+---
+
+<div
+  class="container"
+  x-data="{ menuOpen: false }"
+  @keydown.escape="menuOpen = false"
+>
+  <button id="theme-button" type="button" @click="menuOpen = ! menuOpen"
+    ><BrushIcon width={24} height={24} /></button
+  >
+  <div class="overlay" @click="menuOpen = !menuOpen" x-show="menuOpen"></div>
+  <div
+    class="theme-menu"
+    x-show="menuOpen"
+    x-transition:enter-start="hidden-menu"
+    x-transition:enter-end="visible-menu"
+    x-transition:leave-start="visible-menu"
+    x-transition:leave-end="hidden-menu"
+  >
+    <legend>Select a theme:</legend>
+    <div>
+      <input
+        type="radio"
+        id="system"
+        name="theme"
+        value="system"
+        x-model="theme"
+      />
+      <label for="system">System</label>
+
+      <input
+        type="radio"
+        id="light"
+        name="theme"
+        value="light"
+        x-model="theme"
+      />
+      <label for="light">Light</label>
+
+      <input type="radio" id="dark" name="theme" value="dark" x-model="theme" />
+      <label for="dark">Dark</label>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: inline;
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 2;
+  }
+
+  .theme-menu {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: var(--background);
+    padding: 20px;
+    width: 300px;
+    z-index: 4;
+    border: var(--border);
+    transition: var(--transition);
+  }
+
+  .hidden-menu {
+    opacity: 0;
+    scale: 0.9;
+  }
+
+  #theme-button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: var(--text);
+  }
+
+  #theme-button:hover {
+    opacity: 0.75;
+  }
+</style>

src/entrypoint.ts

@@ -0,0 +1,6 @@
+import persist from "@alpinejs/persist";
+import type { Alpine } from "alpinejs";
+
+export default (Alpine: Alpine) => {
+	Alpine.plugin(persist);
+};

src/global.css

@@ -20,28 +20,24 @@
 	--radius: 5px;
 	--border: 1px solid #ced3f1;
 	--max-page-width: 800px;
+	--transition: all 0.3s ease-in-out;
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		--blue: #89b4fa;
-		--sky: #89dceb;
-		--red: #f38ba8;
-		--orange: #fab387;
-		--text: #cdd6f4;
-		--background: #1e1e2e;
-		--border: 1px solid #505160;
-	}
+.theme-dark {
+	--blue: #89b4fa;
+	--sky: #89dceb;
+	--red: #f38ba8;
+	--orange: #fab387;
+	--text: #cdd6f4;
+	--background: #1e1e2e;
+	--border: 1px solid #505160;
 }
 
-html {
+body {
 	color: var(--text);
 	background-color: var(--background);
 	font-family: "Noto Sans", sans-serif;
 	font-size: 1.1rem;
-}
-
-body {
 	margin: 0;
 	padding: 0;
 }

src/layouts/Layout.astro

@@ -35,8 +35,18 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown";
   </head>
   <body
     class="layout-simple"
-    x-data="{ drawerOpen: false }"
-    :class="drawerOpen ? 'lock-scroll' : ''"
+    x-data="{
+      drawerOpen: false,
+      theme: $persist('system'),
+      isDark() {
+        const osIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        if (this.theme === 'dark' || this.theme === 'system' && osIsDark) return true;
+
+        return false;
+      }
+    }"
+    :class="{ 'lock-scroll': drawerOpen, 'theme-dark': isDark()}"
   >
     <Header />
     <main transition:animate="initial">