initial theme picker logic

2025-11-05 16:55:48 -05:00
parent 6b86b0adb2
commit e802d6238e
10 changed files with 143 additions and 33 deletions
@@ -35,8 +35,18 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown";
  </head>
  <body
    class="layout-simple"
-    x-data="{ drawerOpen: false }"
-    :class="drawerOpen ? 'lock-scroll' : ''"
+    x-data="{
+      drawerOpen: false,
+      theme: $persist('system'),
+      isDark() {
+        const osIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        if (this.theme === 'dark' || this.theme === 'system' && osIsDark) return true;
+
+        return false;
+      }
+    }"
+    :class="{ 'lock-scroll': drawerOpen, 'theme-dark': isDark()}"
  >
    <Header />
    <main transition:animate="initial">