From 86bee9843ea3ec6240bce7906acbd61666d3ccb3 Mon Sep 17 00:00:00 2001
From: Michael Villalba <visomi.dev@gmail.com>
Date: Sat, 15 Aug 2026 12:45:43 -0600
Subject: [PATCH] fix(website): re-init scripts after ClientRouter navigation

Hotfix for the regressions that PR #39 introduced in production.

Root cause: bundled module scripts (background.ts, theme-switcher.ts,
navbar.ts, projects.ts, page-navigation-loader.ts) only execute once
in the page lifetime. With ClientRouter, the body is swapped on every
navigation but the modules do not re-run, so:

- The hardcoded <html class="dark"> in the new SSR HTML re-applied
  on each swap overrode the user light theme (the inline head script
  was deduplicated by Astro and did not re-run).
- The teardown in astro:before-swap disposed the WebGL renderer but
  no equivalent re-init happened on the new page, so the starfield
  never came back after navigating away.
- All click/keyup listeners attached to swapped DOM nodes were lost,
  including the theme switcher and the projects filter buttons.

Fix:
- Add data-astro-rerun to the inline theme script in <head> so it
  re-applies localStorage on each swap.
- theme-switcher.ts: re-bind handlers and sync icons on
  astro:page-load. Module-level onPageLoad reference prevents
  duplicate listeners.
- background.ts: re-init on astro:page-load. Cache shader text so
  ClientRouter navigations do not re-fetch them. Track darkBackground
  in state for the syncLoop check.
- navbar.ts, projects.ts: idempotent attach via dataset marker and
  astro:page-load re-bind.
- page-navigation-loader.ts: query the loader element fresh inside
  each handler (the body is swapped and the captured reference
  becomes stale).

Tests: add 4 e2e specs in website-perf.spec.ts that exactly reproduce
the user-reported regressions (light/dark theme persistence across
SPA, canvas re-creation after nav roundtrip, theme switcher
interactive after nav). Plus a new theme-switcher unit test for the
astro:page-load re-bind.

Verification: site:test 22/22 + coverage >=80%, site:typecheck
0 errors, site:lint clean, site-e2e:e2e 35/35 (chromium).
---
 apps/web/site/src/layouts/base-layout.astro   |   2 +-
 apps/web/site/src/scripts/background.spec.ts  |   5 +
 apps/web/site/src/scripts/background.ts       | 184 ++++++++++--------
 apps/web/site/src/scripts/navbar.ts           |  26 ++-
 .../src/scripts/page-navigation-loader.ts     | 102 +++++-----
 apps/web/site/src/scripts/projects.ts         | 183 +++++++++--------
 .../site/src/scripts/theme-switcher.spec.ts   |  30 +++
 apps/web/site/src/scripts/theme-switcher.ts   | 128 ++++++------
 8 files changed, 385 insertions(+), 275 deletions(-)

diff --git a/apps/web/site/src/layouts/base-layout.astro b/apps/web/site/src/layouts/base-layout.astro
index 8ba651f..cf03ba3 100644
--- a/apps/web/site/src/layouts/base-layout.astro
+++ b/apps/web/site/src/layouts/base-layout.astro
@@ -34,7 +34,7 @@ const prefetchTargets = ['/', '/journey/', '/projects/', '/resume/', '/contact/'
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content={Astro.generator} />
-    <script is:inline>
+    <script is:inline data-astro-rerun>
       (() => {
         const html = document.documentElement;
         const isDark = (() => {
diff --git a/apps/web/site/src/scripts/background.spec.ts b/apps/web/site/src/scripts/background.spec.ts
index 9ab99db..ab31d5d 100644
--- a/apps/web/site/src/scripts/background.spec.ts
+++ b/apps/web/site/src/scripts/background.spec.ts
@@ -107,6 +107,9 @@ describe('initBackground', () => {
   });
 
   it('handles shader loading failures without throwing', async () => {
+    const { __resetBackgroundForTesting } = await import('./background');
+    __resetBackgroundForTesting();
+
     document.body.innerHTML = `
       <div id="light-bg"></div>
       <div id="dark-bg"></div>
@@ -115,6 +118,8 @@ describe('initBackground', () => {
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
 
     globalThis.fetch = vi.fn().mockRejectedValue(new Error('network')) as typeof fetch;
+    window.requestAnimationFrame = vi.fn().mockImplementation(() => 1);
+
     await initBackground();
 
     expect(consoleError).toHaveBeenCalled();
diff --git a/apps/web/site/src/scripts/background.ts b/apps/web/site/src/scripts/background.ts
index 6791b0b..2538ba0 100644
--- a/apps/web/site/src/scripts/background.ts
+++ b/apps/web/site/src/scripts/background.ts
@@ -12,6 +12,7 @@ type BackgroundState = {
   renderer: THREE.WebGLRenderer;
   material: THREE.ShaderMaterial;
   resolution: THREE.Vector2;
+  darkBackground: HTMLElement;
 };
 
 type Cleanup = () => void;
@@ -20,6 +21,8 @@ let state: BackgroundState | null = null;
 let frameId: number | null = null;
 let isRunning = false;
 const cleanups: Cleanup[] = [];
+let vertexShaderText: string | null = null;
+let fragmentShaderText: string | null = null;
 
 const stopLoop = () => {
   isRunning = false;
@@ -49,12 +52,12 @@ const startLoop = () => {
   frameId = window.requestAnimationFrame(tick);
 };
 
-const syncLoop = (darkBackground: HTMLElement | null) => {
+const syncLoop = () => {
   if (!state) {
     return;
   }
 
-  const shouldRender = !document.hidden && darkBackground !== null && !darkBackground.classList.contains('hidden');
+  const shouldRender = !document.hidden && !state.darkBackground.classList.contains('hidden');
 
   if (shouldRender) {
     startLoop();
@@ -79,6 +82,27 @@ const teardown = () => {
   }
 };
 
+const loadShaders = async (): Promise<[string, string] | null> => {
+  if (vertexShaderText !== null && fragmentShaderText !== null) {
+    return [vertexShaderText, fragmentShaderText];
+  }
+
+  try {
+    const [vertex, fragment] = await Promise.all([
+      fetch(vertexShaderUrl).then((response) => response.text()),
+      fetch(fragmentShaderUrl).then((response) => response.text()),
+    ]);
+
+    vertexShaderText = vertex;
+    fragmentShaderText = fragment;
+
+    return [vertex, fragment];
+  } catch (error) {
+    console.error('Failed to load background shaders:', error);
+    return null;
+  }
+};
+
 export const initBackground = async () => {
   if (state) {
     teardown();
@@ -102,17 +126,12 @@ export const initBackground = async () => {
     lightBackground.classList.remove('hidden');
   }
 
-  let currentTheme: 'light' | 'dark' = isDarkOnLoad ? 'dark' : 'light';
-
   const themeObserver = new MutationObserver(() => {
-    const isDark = html.classList.contains('dark');
-    const nextTheme: 'light' | 'dark' = isDark ? 'dark' : 'light';
-
-    if (nextTheme === currentTheme) {
+    if (!state) {
       return;
     }
 
-    currentTheme = nextTheme;
+    const isDark = html.classList.contains('dark');
 
     if (isDark) {
       lightBackground.classList.remove('bg-upward-enter');
@@ -123,7 +142,7 @@ export const initBackground = async () => {
 
       window.setTimeout(() => {
         lightBackground.classList.add('hidden');
-        syncLoop(darkBackground);
+        syncLoop();
       }, 700);
       return;
     }
@@ -136,88 +155,96 @@ export const initBackground = async () => {
 
     window.setTimeout(() => {
       darkBackground.classList.add('hidden');
-      syncLoop(darkBackground);
+      syncLoop();
     }, 700);
   });
 
   themeObserver.observe(html, { attributes: true, attributeFilter: ['class'] });
   cleanups.push(() => themeObserver.disconnect());
 
-  try {
-    const [vertexShader, fragmentShader] = await Promise.all([
-      fetch(vertexShaderUrl).then((response) => response.text()),
-      fetch(fragmentShaderUrl).then((response) => response.text()),
-    ]);
+  const shaders = await loadShaders();
+
+  if (!shaders) {
+    return;
+  }
+
+  const [vertexShader, fragmentShader] = shaders;
 
-    const scene = new THREE.Scene();
-    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-    const resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);
-
-    const material = new THREE.ShaderMaterial({
-      uniforms: {
-        iTime: { value: 0 },
-        iResolution: { value: resolution },
-      },
-      vertexShader,
-      fragmentShader,
-    });
-
-    const geometry = new THREE.PlaneGeometry(2, 2);
-    const mesh = new THREE.Mesh(geometry, material);
-
-    scene.add(mesh);
-
-    const renderer = new THREE.WebGLRenderer({
-      antialias: false,
-      alpha: true,
-      powerPreference: 'low-power',
-    });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, maxPixelRatio));
-    renderer.setSize(resolution.x, resolution.y);
-    darkBackground.appendChild(renderer.domElement);
-
-    state = { scene, camera, renderer, material, resolution };
-
-    const onResize = () => {
-      if (!state) {
+  const scene = new THREE.Scene();
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: { value: resolution },
+    },
+    vertexShader,
+    fragmentShader,
+  });
+
+  const geometry = new THREE.PlaneGeometry(2, 2);
+  const mesh = new THREE.Mesh(geometry, material);
+
+  scene.add(mesh);
+
+  const renderer = new THREE.WebGLRenderer({
+    antialias: false,
+    alpha: true,
+    powerPreference: 'low-power',
+  });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, maxPixelRatio));
+  renderer.setSize(resolution.x, resolution.y);
+  darkBackground.appendChild(renderer.domElement);
+
+  state = { scene, camera, renderer, material, resolution, darkBackground };
+
+  const onResize = () => {
+    if (!state) {
+      return;
+    }
+
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    renderer.setSize(width, height);
+    resolution.set(width, height);
+  };
+
+  window.addEventListener('resize', onResize);
+  cleanups.push(() => window.removeEventListener('resize', onResize));
+
+  const onVisibilityChange = () => syncLoop();
+
+  document.addEventListener('visibilitychange', onVisibilityChange);
+  cleanups.push(() => document.removeEventListener('visibilitychange', onVisibilityChange));
+
+  const io = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+
+      if (entry?.isIntersecting === false) {
+        stopLoop();
         return;
       }
 
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-
-      renderer.setSize(width, height);
-      resolution.set(width, height);
-    };
-
-    window.addEventListener('resize', onResize);
-    cleanups.push(() => window.removeEventListener('resize', onResize));
-
-    document.addEventListener('visibilitychange', () => syncLoop(darkBackground));
-    cleanups.push(() => document.removeEventListener('visibilitychange', () => syncLoop(darkBackground)));
-
-    {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          const entry = entries[0];
-          syncLoop(entry?.isIntersecting ? darkBackground : null);
-        },
-        { threshold: 0 },
-      );
-      observer.observe(darkBackground);
-      cleanups.push(() => observer.disconnect());
-    }
+      syncLoop();
+    },
+    { threshold: 0 },
+  );
+  io.observe(darkBackground);
+  cleanups.push(() => io.disconnect());
 
-    syncLoop(darkBackground);
-  } catch (error) {
-    console.error('Failed to initialize 3D background:', error);
-    teardown();
-  }
+  syncLoop();
 };
 
 export const destroyBackground = () => teardown();
 
-document.addEventListener('astro:before-swap', () => teardown());
+export const __resetBackgroundForTesting = () => {
+  teardown();
+  vertexShaderText = null;
+  fragmentShaderText = null;
+};
 
 const start = () => {
   void initBackground();
@@ -228,3 +255,6 @@ if (document.readyState === 'loading') {
 } else {
   start();
 }
+
+document.addEventListener('astro:before-swap', teardown);
+document.addEventListener('astro:page-load', start);
diff --git a/apps/web/site/src/scripts/navbar.ts b/apps/web/site/src/scripts/navbar.ts
index 88c5872..dbe76d7 100644
--- a/apps/web/site/src/scripts/navbar.ts
+++ b/apps/web/site/src/scripts/navbar.ts
@@ -1,14 +1,24 @@
 export const initNavbar = () => {
-  const button = document.getElementById('mobile-menu-btn');
-  const menu = document.getElementById('mobile-menu');
+  const attach = () => {
+    const button = document.getElementById('mobile-menu-btn');
+    const menu = document.getElementById('mobile-menu');
 
-  if (!button || !menu) {
-    return;
-  }
+    if (!button || !menu) {
+      return;
+    }
 
-  button.addEventListener('click', () => {
-    menu.classList.toggle('hidden');
-  });
+    if (button.dataset['navbarBound'] === 'true') {
+      return;
+    }
+
+    button.dataset['navbarBound'] = 'true';
+    button.addEventListener('click', () => {
+      menu.classList.toggle('hidden');
+    });
+  };
+
+  attach();
+  document.addEventListener('astro:page-load', attach);
 };
 
 if (document.readyState === 'loading') {
diff --git a/apps/web/site/src/scripts/page-navigation-loader.ts b/apps/web/site/src/scripts/page-navigation-loader.ts
index 2800436..68c4fe9 100644
--- a/apps/web/site/src/scripts/page-navigation-loader.ts
+++ b/apps/web/site/src/scripts/page-navigation-loader.ts
@@ -1,59 +1,59 @@
-export const initPageNavigationLoader = () => {
+const hideLoader = () => {
   const loader = document.getElementById('page-navigation-loader');
 
   if (!loader) {
     return;
   }
 
-  const hideLoader = () => {
-    loader.classList.remove('in-out-enter');
-    loader.classList.add('in-out-leave');
-
-    window.setTimeout(() => {
-      loader.classList.add('hidden');
-    }, 400);
-  };
-
-  document.addEventListener('astro:before-preparation', hideLoader);
-  document.addEventListener('astro:after-swap', hideLoader);
-
-  document.addEventListener('click', (event) => {
-    const target = event.target;
-
-    if (!(target instanceof Element)) {
-      return;
-    }
-
-    const link = target.closest<HTMLAnchorElement>('a');
-
-    if (
-      !link ||
-      !link.href ||
-      link.href.startsWith('mailto:') ||
-      link.href.startsWith('tel:') ||
-      link.hasAttribute('target') ||
-      link.hostname !== window.location.hostname ||
-      link.pathname === window.location.pathname ||
-      link.href.includes('#')
-    ) {
-      return;
-    }
-
-    loader.classList.remove('hidden', 'in-out-leave');
-    loader.classList.add('in-out-enter');
-  });
-
-  window.addEventListener('pageshow', (event) => {
-    if (!event.persisted) {
-      return;
-    }
-
-    hideLoader();
-  });
+  loader.classList.remove('in-out-enter');
+  loader.classList.add('in-out-leave');
+
+  window.setTimeout(() => {
+    loader.classList.add('hidden');
+  }, 400);
 };
 
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initPageNavigationLoader);
-} else {
-  initPageNavigationLoader();
-}
+document.addEventListener('astro:before-preparation', hideLoader);
+document.addEventListener('astro:after-swap', hideLoader);
+
+document.addEventListener('click', (event) => {
+  const target = event.target;
+
+  if (!(target instanceof Element)) {
+    return;
+  }
+
+  const link = target.closest<HTMLAnchorElement>('a');
+
+  if (
+    !link ||
+    !link.href ||
+    link.href.startsWith('mailto:') ||
+    link.href.startsWith('tel:') ||
+    link.hasAttribute('target') ||
+    link.hostname !== window.location.hostname ||
+    link.pathname === window.location.pathname ||
+    link.href.includes('#')
+  ) {
+    return;
+  }
+
+  const loader = document.getElementById('page-navigation-loader');
+
+  if (!loader) {
+    return;
+  }
+
+  loader.classList.remove('hidden', 'in-out-leave');
+  loader.classList.add('in-out-enter');
+});
+
+window.addEventListener('pageshow', (event) => {
+  if (!event.persisted) {
+    return;
+  }
+
+  hideLoader();
+});
+
+export const initPageNavigationLoader = () => undefined;
diff --git a/apps/web/site/src/scripts/projects.ts b/apps/web/site/src/scripts/projects.ts
index 5b03295..178c580 100644
--- a/apps/web/site/src/scripts/projects.ts
+++ b/apps/web/site/src/scripts/projects.ts
@@ -1,97 +1,114 @@
 export const initProjects = () => {
-  const filterButtons = document.querySelectorAll<HTMLButtonElement>('.filter-btn');
-  const cards = document.querySelectorAll<HTMLElement>('.project-card');
-  const previewButtons = document.querySelectorAll<HTMLButtonElement>('[data-project-thumb]');
-
-  if (!cards.length) {
-    return;
-  }
-
-  const activeClasses = [
-    'bg-primary-light',
-    'dark:bg-primary-dark',
-    'border-transparent',
-    'text-white',
-    'dark:text-black',
-  ];
-  const inactiveClasses = [
-    'border-border-light',
-    'dark:border-border-dark',
-    'text-muted-light',
-    'dark:text-muted-dark',
-    'hover:border-primary-light',
-    'dark:hover:border-primary-dark',
-    'bg-transparent',
-  ];
-
-  if (filterButtons.length) {
-    filterButtons.forEach((button) => {
-      button.addEventListener('click', () => {
-        const filter = button.dataset.filter;
-
-        filterButtons.forEach((item) => {
-          item.classList.remove(...activeClasses);
-          item.classList.add(...inactiveClasses);
-        });
-
-        button.classList.remove(...inactiveClasses);
-        button.classList.add(...activeClasses);
-
-        cards.forEach((card) => {
-          card.style.display = filter === 'ALL' || card.dataset.category === filter ? '' : 'none';
+  const attach = () => {
+    const filterButtons = document.querySelectorAll<HTMLButtonElement>('.filter-btn');
+    const cards = document.querySelectorAll<HTMLElement>('.project-card');
+    const previewButtons = document.querySelectorAll<HTMLButtonElement>('[data-project-thumb]');
+
+    if (!cards.length) {
+      return;
+    }
+
+    const activeClasses = [
+      'bg-primary-light',
+      'dark:bg-primary-dark',
+      'border-transparent',
+      'text-white',
+      'dark:text-black',
+    ];
+    const inactiveClasses = [
+      'border-border-light',
+      'dark:border-border-dark',
+      'text-muted-light',
+      'dark:text-muted-dark',
+      'hover:border-primary-light',
+      'dark:hover:border-primary-dark',
+      'bg-transparent',
+    ];
+
+    if (filterButtons.length) {
+      filterButtons.forEach((button) => {
+        if (button.dataset['projectsBound'] === 'true') {
+          return;
+        }
+
+        button.dataset['projectsBound'] = 'true';
+
+        button.addEventListener('click', () => {
+          const filter = button.dataset.filter;
+
+          filterButtons.forEach((item) => {
+            item.classList.remove(...activeClasses);
+            item.classList.add(...inactiveClasses);
+          });
+
+          button.classList.remove(...inactiveClasses);
+          button.classList.add(...activeClasses);
+
+          cards.forEach((card) => {
+            card.style.display = filter === 'ALL' || card.dataset.category === filter ? '' : 'none';
+          });
         });
       });
-    });
-  }
-
-  previewButtons.forEach((button) => {
-    button.addEventListener('click', () => {
-      const slug = button.dataset.projectThumb;
-      const imageSrc = button.dataset.imageSrc;
-      const imageAlt = button.dataset.imageAlt;
-      const captionStep = button.dataset.captionStep;
-      const captionTitle = button.dataset.captionTitle;
-      const captionBody = button.dataset.captionBody;
-
-      if (!slug || !imageSrc) {
-        return;
-      }
+    }
 
-      const preview = document.querySelector<HTMLImageElement>(`[data-project-preview="${slug}"]`);
-
-      if (!preview) {
+    previewButtons.forEach((button) => {
+      if (button.dataset['projectsThumbBound'] === 'true') {
         return;
       }
 
-      preview.src = imageSrc;
-      preview.srcset = '';
-      preview.alt = imageAlt ?? preview.alt;
-
-      const activeStep = document.querySelector<HTMLElement>(`[data-project-caption-step="${slug}"]`);
-      const activeTitle = document.querySelector<HTMLElement>(`[data-project-caption-title="${slug}"]`);
-      const activeBody = document.querySelector<HTMLElement>(`[data-project-caption-body="${slug}"]`);
+      button.dataset['projectsThumbBound'] = 'true';
 
-      if (activeStep && captionStep) {
-        activeStep.textContent = captionStep;
-      }
-
-      if (activeTitle && captionTitle) {
-        activeTitle.textContent = captionTitle;
-      }
-
-      if (activeBody && captionBody) {
-        activeBody.textContent = captionBody;
-      }
+      button.addEventListener('click', () => {
+        const slug = button.dataset.projectThumb;
+        const imageSrc = button.dataset.imageSrc;
+        const imageAlt = button.dataset.imageAlt;
+        const captionStep = button.dataset.captionStep;
+        const captionTitle = button.dataset.captionTitle;
+        const captionBody = button.dataset.captionBody;
+
+        if (!slug || !imageSrc) {
+          return;
+        }
+
+        const preview = document.querySelector<HTMLImageElement>(`[data-project-preview="${slug}"]`);
+
+        if (!preview) {
+          return;
+        }
+
+        preview.src = imageSrc;
+        preview.srcset = '';
+        preview.alt = imageAlt ?? preview.alt;
+
+        const activeStep = document.querySelector<HTMLElement>(`[data-project-caption-step="${slug}"]`);
+        const activeTitle = document.querySelector<HTMLElement>(`[data-project-caption-title="${slug}"]`);
+        const activeBody = document.querySelector<HTMLElement>(`[data-project-caption-body="${slug}"]`);
+
+        if (activeStep && captionStep) {
+          activeStep.textContent = captionStep;
+        }
+
+        if (activeTitle && captionTitle) {
+          activeTitle.textContent = captionTitle;
+        }
+
+        if (activeBody && captionBody) {
+          activeBody.textContent = captionBody;
+        }
+
+        document.querySelectorAll<HTMLButtonElement>(`[data-project-thumb="${slug}"]`).forEach((item) => {
+          item.classList.remove('ring-primary-light', 'dark:ring-primary-dark', 'ring-1');
+          item.setAttribute('aria-pressed', 'false');
+        });
 
-      document.querySelectorAll<HTMLButtonElement>(`[data-project-thumb="${slug}"]`).forEach((item) => {
-        item.classList.remove('ring-primary-light', 'dark:ring-primary-dark', 'ring-1');
-        item.setAttribute('aria-pressed', 'false');
+        button.classList.add('ring-primary-light', 'dark:ring-primary-dark', 'ring-1');
+        button.setAttribute('aria-pressed', 'true');
       });
-
-      button.classList.add('ring-primary-light', 'dark:ring-primary-dark', 'ring-1');
-      button.setAttribute('aria-pressed', 'true');
     });
-  });
+  };
+
+  attach();
+  document.addEventListener('astro:page-load', attach);
 };
 
 if (document.readyState === 'loading') {
diff --git a/apps/web/site/src/scripts/theme-switcher.spec.ts b/apps/web/site/src/scripts/theme-switcher.spec.ts
index 88ed4aa..d3393ab 100644
--- a/apps/web/site/src/scripts/theme-switcher.spec.ts
+++ b/apps/web/site/src/scripts/theme-switcher.spec.ts
@@ -73,4 +73,34 @@ describe('initThemeSwitcher', () => {
     expect(document.documentElement.classList.contains('dark')).toBe(true);
     expect(localStorage.getItem('theme')).toBe('dark');
   });
+
+  it('re-applies the stored theme and re-attaches handlers on astro:page-load', () => {
+    vi.useFakeTimers();
+
+    document.body.innerHTML = createSwitcherMarkup();
+    localStorage.setItem('theme', 'light');
+    window.matchMedia = vi.fn().mockReturnValue({ matches: true }) as typeof window.matchMedia;
+    document.documentElement.classList.add('dark');
+
+    initThemeSwitcher();
+
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+
+    document.body.innerHTML = createSwitcherMarkup();
+
+    document.dispatchEvent(new Event('astro:page-load'));
+    vi.advanceTimersByTime(0);
+
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+
+    const newLabel = document.querySelector<HTMLElement>('.theme-switch-label');
+
+    newLabel?.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, key: 'Enter' }));
+    vi.advanceTimersByTime(350);
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    expect(localStorage.getItem('theme')).toBe('dark');
+
+    vi.useRealTimers();
+  });
 });
diff --git a/apps/web/site/src/scripts/theme-switcher.ts b/apps/web/site/src/scripts/theme-switcher.ts
index 96d0ec3..90db855 100644
--- a/apps/web/site/src/scripts/theme-switcher.ts
+++ b/apps/web/site/src/scripts/theme-switcher.ts
@@ -1,22 +1,18 @@
-export const initThemeSwitcher = () => {
-  const html = document.documentElement;
-  const labels = document.querySelectorAll<HTMLElement>('.theme-switch-label');
+type PageLoadHandler = () => void;
 
-  // Initial load
+let onPageLoad: PageLoadHandler | null = null;
+
+const applyTheme = () => {
   const savedTheme = window.localStorage?.getItem('theme');
   const systemDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
 
-  let isDark = false;
+  return savedTheme === 'dark' || (!savedTheme && systemDark);
+};
 
-  if (savedTheme === 'dark' || (!savedTheme && systemDark)) {
-    html.classList.add('dark');
-    isDark = true;
-  } else {
-    html.classList.remove('dark');
-    isDark = false;
-  }
+const syncIcons = (html: HTMLElement) => {
+  const isDark = html.classList.contains('dark');
 
-  labels.forEach((label) => {
+  document.querySelectorAll<HTMLElement>('.theme-switch-label').forEach((label) => {
     const input = label.querySelector<HTMLInputElement>('.theme-switch-input');
     const iconLight = label.querySelector<HTMLElement>('.theme-icon-light');
     const iconDark = label.querySelector<HTMLElement>('.theme-icon-dark');
@@ -25,73 +21,95 @@ export const initThemeSwitcher = () => {
       return;
     }
 
+    input.checked = isDark;
+
     if (isDark) {
-      input.checked = true;
       iconDark.classList.remove('hidden', 'upward-enter', 'upward-leave');
       iconLight.classList.add('hidden');
     } else {
-      input.checked = false;
       iconLight.classList.remove('hidden', 'upward-enter', 'upward-leave');
       iconDark.classList.add('hidden');
     }
+  });
+};
 
-    function toggleTheme(event?: Event) {
-      if (event?.type === 'click') {
-        event.preventDefault();
-      }
-
-      isDark = !html.classList.contains('dark');
+const toggleTheme = (html: HTMLElement) => {
+  const nextIsDark = !html.classList.contains('dark');
 
-      if (isDark) {
-        html.classList.add('dark');
-      } else {
-        html.classList.remove('dark');
-      }
+  html.classList.toggle('dark', nextIsDark);
+  window.localStorage?.setItem('theme', nextIsDark ? 'dark' : 'light');
 
-      window.localStorage?.setItem('theme', isDark ? 'dark' : 'light');
+  syncIcons(html);
 
-      labels.forEach((currentLabel) => {
-        const currentInput = currentLabel.querySelector<HTMLInputElement>('.theme-switch-input');
-        const currentLightIcon = currentLabel.querySelector<HTMLElement>('.theme-icon-light');
-        const currentDarkIcon = currentLabel.querySelector<HTMLElement>('.theme-icon-dark');
+  document.querySelectorAll<HTMLElement>('.theme-switch-label').forEach((label) => {
+    const lightIcon = label.querySelector<HTMLElement>('.theme-icon-light');
+    const darkIcon = label.querySelector<HTMLElement>('.theme-icon-dark');
 
-        if (!currentInput || !currentLightIcon || !currentDarkIcon) {
-          return;
-        }
+    if (!lightIcon || !darkIcon) {
+      return;
+    }
 
-        currentInput.checked = isDark;
+    if (nextIsDark) {
+      lightIcon.classList.remove('upward-enter');
+      lightIcon.classList.add('upward-leave');
 
-        if (isDark) {
-          currentLightIcon.classList.remove('upward-enter');
-          currentLightIcon.classList.add('upward-leave');
+      window.setTimeout(() => {
+        lightIcon.classList.add('hidden');
+        darkIcon.classList.remove('hidden', 'upward-leave');
+        darkIcon.classList.add('upward-enter');
+      }, 350);
+      return;
+    }
 
-          window.setTimeout(() => {
-            currentLightIcon.classList.add('hidden');
-            currentDarkIcon.classList.remove('hidden', 'upward-leave');
-            currentDarkIcon.classList.add('upward-enter');
-          }, 350);
-          return;
-        }
+    darkIcon.classList.remove('upward-enter');
+    darkIcon.classList.add('upward-leave');
 
-        currentDarkIcon.classList.remove('upward-enter');
-        currentDarkIcon.classList.add('upward-leave');
+    window.setTimeout(() => {
+      darkIcon.classList.add('hidden');
+      lightIcon.classList.remove('hidden', 'upward-leave');
+      lightIcon.classList.add('upward-enter');
+    }, 350);
+  });
+};
 
-        window.setTimeout(() => {
-          currentDarkIcon.classList.add('hidden');
-          currentLightIcon.classList.remove('hidden', 'upward-leave');
-          currentLightIcon.classList.add('upward-enter');
-        }, 350);
-      });
+const attachHandlers = (html: HTMLElement) => {
+  document.querySelectorAll<HTMLElement>('.theme-switch-label').forEach((label) => {
+    if (label.dataset['themeSwitchBound'] === 'true') {
+      return;
     }
 
-    label.addEventListener('click', toggleTheme);
+    label.dataset['themeSwitchBound'] = 'true';
+
+    label.addEventListener('click', (event) => {
+      event.preventDefault();
+      toggleTheme(html);
+    });
+
     label.addEventListener('keyup', (event) => {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
-        toggleTheme();
+        toggleTheme(html);
       }
     });
   });
 };
 
+export const initThemeSwitcher = () => {
+  const html = document.documentElement;
+
+  if (!onPageLoad) {
+    onPageLoad = () => {
+      html.classList.toggle('dark', applyTheme());
+      attachHandlers(html);
+      syncIcons(html);
+    };
+
+    document.addEventListener('astro:page-load', onPageLoad);
+  }
+
+  html.classList.toggle('dark', applyTheme());
+  attachHandlers(html);
+  syncIcons(html);
+};
+
 initThemeSwitcher();