Refactor theme change handling to include source parameter and improve initial theme setting

Author: martrapp

astro.config.ts

@@ -93,8 +93,12 @@ export default defineConfig({
           content: `
           document.addEventListener('starlight:theme-change', (e) => {
             e.preventDefault();
-            const { theme, resolvedTheme } = e.detail;
-            document.startViewTransition({types: ['light-dark'],  update: () => (document.documentElement.dataset.theme = resolvedTheme)});
+            const { theme, resolvedTheme, source } = e.detail;
+            if (source !== 'initial') {
+              document.startViewTransition({types: ['light-dark'],  update: () => (document.documentElement.dataset.theme = resolvedTheme)});
+            } else {             
+              document.documentElement.dataset.theme = resolvedTheme;
+            }
           });`,
         },
         {
@@ -201,7 +205,7 @@ export default defineConfig({
       allowedHosts: [".trycloudflare.com"],
     },
     optimizeDeps: {
-      
+
       include: [
         'unified',
         'remark-parse',
@@ -241,8 +245,10 @@ function sidebar() {
           label: "Mechanics of Default Animations",
           link: "/basics/default-animations/",
         },
-        { label: "Styling View Transitions", link: "/basics/styling/",
-          badge: { text: "Updated!", variant: "success" } as Badge },
+        {
+          label: "Styling View Transitions", link: "/basics/styling/",
+          badge: { text: "Updated!", variant: "success" } as Badge
+        },
         { label: "JavaScript API", link: "/basics/javascript/" },
         { label: "Playing Hide & Seek", link: "/basics/hide-and-seek/", },
         {

patches/@astrojs+starlight+0.39.2.patch

@@ -1,28 +1,40 @@
 diff --git a/node_modules/@astrojs/starlight/components/ThemeSelect.astro b/node_modules/@astrojs/starlight/components/ThemeSelect.astro
-index a7cd175..d3e9670 100644
+index d3e9670..ed6c93c 100644
 --- a/node_modules/@astrojs/starlight/components/ThemeSelect.astro
 +++ b/node_modules/@astrojs/starlight/components/ThemeSelect.astro
-@@ -48,9 +48,20 @@ import Select from './Select.astro';
+@@ -47,13 +47,13 @@ import Select from './Select.astro';
+ 		matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
 
  	/** Update select menu UI, document theme, and local storage state. */
- 	function onThemeChange(theme: Theme): void {
--		StarlightThemeProvider.updatePickers(theme);
--		document.documentElement.dataset.theme = theme === 'auto' ? getPreferredColorScheme() : theme;
--		storeTheme(theme);
-+	  StarlightThemeProvider.updatePickers(theme);
-+	
-+	  const resolvedTheme = theme === 'auto' ? getPreferredColorScheme() : theme;
-+	  const event = new CustomEvent('starlight:theme-change', {
-+	    cancelable: true,
-+	    detail: { theme, resolvedTheme },
-+	  });
-+  
-+	  const handled = !document.dispatchEvent(event);
-+	  if (!handled) {
-+	    document.documentElement.dataset.theme = resolvedTheme;
-+	  }
-+  
-+	  storeTheme(theme);
- 	}
+-	function onThemeChange(theme: Theme): void {
++	function onThemeChange(theme: Theme, source: 'initial' | 'media' | 'select'): void {
+ 	  StarlightThemeProvider.updatePickers(theme);
+ 	
+ 	  const resolvedTheme = theme === 'auto' ? getPreferredColorScheme() : theme;
+ 	  const event = new CustomEvent('starlight:theme-change', {
+ 	    cancelable: true,
+-	    detail: { theme, resolvedTheme },
++	    detail: { theme, resolvedTheme, source },
+ 	  });
+   
+ 	  const handled = !document.dispatchEvent(event);
+@@ -66,16 +66,16 @@ import Select from './Select.astro';
 
  	// React to changes in system color scheme.
+ 	matchMedia(`(prefers-color-scheme: light)`).addEventListener('change', () => {
+-		if (loadTheme() === 'auto') onThemeChange('auto');
++		if (loadTheme() === 'auto') onThemeChange('auto', 'media');
+ 	});
+ 
+ 	class StarlightThemeSelect extends HTMLElement {
+ 		constructor() {
+ 			super();
+-			onThemeChange(loadTheme());
++			onThemeChange(loadTheme(), "initial");
+ 			this.querySelector('select')?.addEventListener('change', (e) => {
+ 				if (e.currentTarget instanceof HTMLSelectElement) {
+-					onThemeChange(parseTheme(e.currentTarget.value));
++					onThemeChange(parseTheme(e.currentTarget.value), 'select');
+ 				}
+ 			});
+ 		}

tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "astro/tsconfigs/strictest",
   "exclude": ["node_modules", "dist"],
   "compilerOptions": {
-    "types": ["@cloudflare/workers-types"],
     "paths": { "@/*": ["./src/*"] }
   }
 }