feat(theme): detect and apply OS theme preference

BenRoe · BenRoe · commit 311cab6331e2 · 2025-12-23T17:29:42.000+01:00
Add support for prefers-color-scheme media query to automatically
apply dark/light themes based on OS settings when no user preference
is saved. Includes listener for dynamic OS theme changes.
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -213,8 +213,17 @@ const ogImageURL = image ? new URL(image, Astro.url) : OPEN_GRAPH.image.src;
           localStorage.setItem('theme', id);
         }
 
+        function getOSThemePreference() {
+          if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+          } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+            return 'light';
+          }
+          return null; // no preference or not supported
+        }
+
         // Apply saved theme on load
-        applyTheme(localStorage.getItem('theme') || 'terminal-dark');
+        applyTheme(localStorage.getItem('theme') || getOSThemePreference() || 'terminal-dark');
 
         // Handle all theme links (desktop dropdown and mobile menu)
         document.querySelectorAll('[data-theme]').forEach(el => {
@@ -224,6 +233,13 @@ const ogImageURL = image ? new URL(image, Astro.url) : OPEN_GRAPH.image.src;
             if (themeId) applyTheme(themeId);
           });
         });
+
+        // Listen for OS theme changes (only if no saved preference)
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+          if (!localStorage.getItem('theme')) {
+            applyTheme(e.matches ? 'dark' : 'light');
+          }
+        });
       })();
     </script>
 
