Merge branch 'main' of https://github.com/themeselection/master-shadcn-astro-template

Author: CodeByOmm

src/components/layout/theme-toggle.tsx

@@ -1,13 +1,17 @@
-'use client'
-
 import * as React from 'react'
 import { MoonStarIcon, SunIcon } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 
 function ThemeToggle() {
   const [theme, setTheme] = React.useState<'light' | 'dark'>(() => {
-    // Read initial theme from DOM (already set by blocking script)
-    if (typeof document !== 'undefined') {
+    // Read initial theme from localStorage first, then DOM
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('theme')
+
+      if (stored === 'light' || stored === 'dark') {
+        return stored
+      }
+
       return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
     }
 

src/layouts/Layout.astro

@@ -43,12 +43,20 @@ const seoProps = Astro.props as Props
           return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
         }
 
-        const theme = getTheme()
-        if (theme === 'dark') {
-          document.documentElement.classList.add('dark')
-        } else {
-          document.documentElement.classList.remove('dark')
+        const applyTheme = () => {
+          const theme = getTheme()
+          if (theme === 'dark') {
+            document.documentElement.classList.add('dark')
+          } else {
+            document.documentElement.classList.remove('dark')
+          }
         }
+
+        // Apply theme immediately on initial load
+        applyTheme()
+
+        // Re-apply theme on Astro page transitions
+        document.addEventListener('astro:page-load', applyTheme)
       })()
     </script>
     <style>