Add Aspire-shaped theme transitions and Aspiry whimsy

src/frontend/src/components/FooterPreferences.astro

@@ -170,40 +170,52 @@ const themeLabels = {
         }
       }
 
-      function applyTheme(theme: ThemeOption) {
-        // Use Starlight's theme system
-        setStoredPreference('starlight-theme', theme);
-
-        // Apply theme immediately
-        const root = document.documentElement;
-        if (theme === 'auto') {
-          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-          root.dataset.theme = prefersDark ? 'dark' : 'light';
-        } else {
-          root.dataset.theme = theme;
+      function getThemeOrigin(element: Element, event?: MouseEvent) {
+        if (event?.detail) {
+          return { x: event.clientX, y: event.clientY };
         }
 
-        updateThemeToggle(theme);
+        const bounds = element.getBoundingClientRect();
+        return {
+          x: bounds.left + bounds.width / 2,
+          y: bounds.top + bounds.height / 2,
+        };
+      }
 
-        // Sync with Starlight's header theme select if present
-        const headerThemeSelect = document.querySelector<HTMLSelectElement>(
-          'starlight-theme-select select'
-        );
-        if (headerThemeSelect) {
-          headerThemeSelect.value = theme;
+      function applyTheme(theme: ThemeOption, origin: { x: number; y: number }) {
+        const transitionApi = (
+          window as Window & {
+            AspireThemeTransition?: {
+              setTheme: (theme: ThemeOption, origin?: { x: number; y: number }) => void;
+            };
+          }
+        ).AspireThemeTransition;
+
+        if (transitionApi) {
+          transitionApi.setTheme(theme, origin);
+          return;
         }
+
+        setStoredPreference('starlight-theme', theme);
+        document.documentElement.dataset.theme =
+          theme === 'auto'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light'
+            : theme;
+        updateThemeToggle(theme);
       }
 
       // Get current theme from Starlight's storage
       const storedTheme = getStoredPreference('starlight-theme');
       updateThemeToggle(isThemeOption(storedTheme) ? storedTheme : 'auto');
 
       for (const button of themeButtons) {
-        button.addEventListener('click', () => {
+        button.addEventListener('click', (event) => {
           const theme = button.dataset.themeOption;
 
           if (isThemeOption(theme)) {
-            applyTheme(theme);
+            applyTheme(theme, getThemeOrigin(button, event));
           }
         });
       }
@@ -229,9 +241,8 @@ const themeLabels = {
                 : (currentIndex + 1) % themeOptions.length;
         const nextTheme = themeOptions[nextIndex];
 
-        applyTheme(nextTheme);
-
         const nextButton = themeButtons.find((button) => button.dataset.themeOption === nextTheme);
+        applyTheme(nextTheme, getThemeOrigin(nextButton ?? themeToggle));
         nextButton?.focus();
       });
     }