From 7d9cb6f5ddab4ed77c2601a29a535ef32af965d0 Mon Sep 17 00:00:00 2001
From: Dustin Thurston <dustin@dustycode.dev>
Date: Tue, 28 Jul 2026 17:23:11 -0400
Subject: [PATCH] fix theme toggle

---
 src/components/commonHead.astro |  2 ++
 src/components/header.astro     |  5 ++--
 src/components/whoami.astro     | 49 ++++++++++++++++-----------------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/commonHead.astro b/src/components/commonHead.astro
index 3e96601..ddebe93 100644
--- a/src/components/commonHead.astro
+++ b/src/components/commonHead.astro
@@ -33,6 +33,8 @@ const analyticsId = import.meta.env.ANALYTICS_ID;
     // Run on page load
     updateTheme();
 
+    document.addEventListener("astro:after-swap", updateTheme);
+
     // Listen for system theme changes
     window
       .matchMedia("(prefers-color-scheme: dark)")
diff --git a/src/components/header.astro b/src/components/header.astro
index 9ebed68..5dfeb3c 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -22,9 +22,10 @@ import Nav from "./nav.astro";
 </header>
 
 <script>
-  const themeSelector = document.getElementById("theme-selector");
+  document.addEventListener("click", (e) => {
+    const target = e.target as HTMLElement | null;
+    if (!target?.closest("#theme-selector")) return;
 
-  themeSelector?.addEventListener("click", () => {
     if (document.documentElement.classList.contains("dark")) {
       localStorage.theme = "light";
       document.documentElement.classList.remove("dark");
diff --git a/src/components/whoami.astro b/src/components/whoami.astro
index 9fed837..6ab25bd 100644
--- a/src/components/whoami.astro
+++ b/src/components/whoami.astro
@@ -4,30 +4,29 @@ import me from "../assets/me.jpg";
 ---
 
 <div class="border border-solid rounded-lg p-6 surface">
-    <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
-        <div class="flex-1 space-y-2">
-            <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
-            <p class="text-lg">
-                I'm a senior full stack software engineer from Michigan,
-                currently enjoying the time from being <a
-                    class="link"
-                    href="https://www.mmorpg.com/news/zenimax-online-studios-laid-off-213-employees-and-166-from-zenimax-media-24-of-all-this-weeks-layoffs-2000138461"
-                    >laid off</a
-                > from Zenimax Online Studios and looking for new opportunities!
-            </p>
-            <p>
-                I love art and music and lately I've been really into
-                photography, stories (movies, shows, games, etc. The medium does
-                not particularly matter to me), and tennis! I have a lot of
-                other interests and love learning about other people's passions,
-                so please chat me up about them!
-            </p>
-        </div>
-        <Image
-            class="rounded-full size-40 shrink-0 -order-1 xl:order-1"
-            loading="eager"
-            src={me}
-            alt="Me smiling in my snowboarding jacket on a sunny winter day"
-        />
+  <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
+    <div class="flex-1 space-y-2">
+      <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
+      <p class="text-lg">
+        I'm a senior full stack software engineer from Michigan, currently
+        enjoying the time from being <a
+          class="link"
+          href="https://www.mmorpg.com/news/zenimax-online-studios-laid-off-213-employees-and-166-from-zenimax-media-24-of-all-this-weeks-layoffs-2000138461"
+          >laid off</a
+        > from Zenimax Online Studios and looking for new opportunities!
+      </p>
+      <p>
+        I love art and music and lately I've been really into photography,
+        stories (movies, shows, games, etc. The medium does not particularly
+        matter to me), and tennis! I have a lot of other interests and love
+        learning about other people's passions, so please chat me up about them!
+      </p>
     </div>
+    <Image
+      class="rounded-full size-40 shrink-0 -order-1 xl:order-1"
+      loading="eager"
+      src={me}
+      alt="A portrait of me smiling and holding my black short-hair cat, Marby"
+    />
+  </div>
 </div>
-- 
2.51.2