Add glassmorphism effect to header with theme support

Introduced a JavaScript function to apply a glassmorphism effect to the header, dynamically adjusting styles based on the current theme. CSS for the header's background and border was removed in favor of this JS-driven approach, and a MutationObserver ensures the effect updates on theme changes.

Author: kylemclaren

src/components/Header.astro

@@ -19,8 +19,37 @@ import Default from '@astrojs/starlight/components/Header.astro';
     }
   }
 
+  function applyGlassmorphism() {
+    const header = document.querySelector('header.header') as HTMLElement;
+    if (header) {
+      const isDark = document.documentElement.dataset.theme !== 'light';
+      header.style.backdropFilter = 'blur(10px) saturate(180%)';
+      header.style.setProperty('-webkit-backdrop-filter', 'blur(10px) saturate(180%)');
+      header.style.background = isDark
+        ? 'rgba(12, 10, 9, 0.7)'
+        : 'rgba(255, 255, 255, 0.7)';
+      header.style.borderBottom = isDark
+        ? '1px solid rgba(255, 255, 255, 0.1)'
+        : '1px solid rgba(0, 0, 0, 0.1)';
+    }
+  }
+
+  // Watch for theme changes
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'data-theme') {
+        applyGlassmorphism();
+      }
+    });
+  });
+  observer.observe(document.documentElement, { attributes: true });
+
   addDashboardLink();
-  document.addEventListener('astro:page-load', addDashboardLink);
+  applyGlassmorphism();
+  document.addEventListener('astro:page-load', () => {
+    addDashboardLink();
+    applyGlassmorphism();
+  });
 </script>
 
 <style is:global>

src/styles/custom.css

@@ -313,31 +313,9 @@ pre[data-bash-prompt] > code {
 }
 
 header.header {
-  /* Fallback for browsers without backdrop-filter */
-  background: oklch(0.18 0.005 49.25) !important;
   border-bottom-color: var(--sl-color-hairline);
 }
 
-@supports (backdrop-filter: blur(1px)) {
-  header.header {
-    background: oklch(0.147 0.004 49.25 / 70%) !important;
-    backdrop-filter: blur(10px) saturate(180%);
-    -webkit-backdrop-filter: blur(10px) saturate(180%);
-    border-bottom: 1px solid oklch(1 0 0 / 10%);
-  }
-}
-
-[data-theme='light'] header.header {
-  background: oklch(1 0 0) !important;
-}
-
-@supports (backdrop-filter: blur(1px)) {
-  [data-theme='light'] header.header {
-    background: oklch(1 0 0 / 70%) !important;
-    border-bottom: 1px solid oklch(0 0 0 / 10%);
-  }
-}
-
 /* Table styling */
 table {
   width: 100%;