Fix theme preference bug

JuditKaramazov · Jan 10, 2024 · c6f2f7a · c6f2f7a
1 parent 70a98d1
commit c6f2f7a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/layouts/Base/Head.astro b/src/layouts/Base/Head.astro
@@ -51,7 +51,8 @@ const appleTouchIcon = await getImage({
 
 <head>
   <script is:inline>
-    const theme = localStorage.getItem('@karamablog/theme') || 'light'
+    const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    const theme = localStorage.getItem('@karamablog/theme') || preferredTheme
     document.documentElement.dataset.theme = theme
   </script>
   <meta charset="utf-8" />

diff --git a/src/layouts/Base/index.astro b/src/layouts/Base/index.astro
@@ -20,7 +20,8 @@ const { pageTitle } = Astro.props
 
 <html lang="en">
   <script is:inline>
-    const theme = localStorage.getItem('@karamablog/theme') || 'light'
+    const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    const theme = localStorage.getItem('@karamablog/theme') || preferredTheme
     document.documentElement.dataset.theme = theme
   </script>
   <Head {...Astro.props} />