fix: issues in last commit

src/components/Head.astro

@@ -27,9 +27,9 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 <meta name="description" content={postDescription || description} />
 <meta name="author" content={author} />
 <meta name="generator" content={Astro.generator} />
-<meta name="theme-color" content=`"${lightMode}"` />
+<meta name="theme-color" content={lightMode} />
-<meta name="theme-color" media="(prefers-color-scheme: light)" content={`"${lightMode}"`} />
+<meta name="theme-color" media="(prefers-color-scheme: light)" content={lightMode} />
-<meta name="theme-color" media="(prefers-color-scheme: dark)" content={`"${darkMode}"`} />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content={darkMode} />
 <meta itemprop="name" content={postTitle || title} />
 <meta itemprop="image" content={postImage || siteScreenshot} />
 <meta itemprop="description" content={postDescription || subtitle} />

src/components/ThemeToggle.astro

@@ -1,40 +1,50 @@
 <script>
-declare global {
+  declare global {
-  interface Document {
+    interface Document {
-    startViewTransition: (callback: () => void) => void
+      startViewTransition: (callback: () => void) => void
+    }
   }
-}
 
-const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
+  const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-if (!TOGGLE)
+  if (!TOGGLE)
-  throw new Error('Theme toggle button not found')
+    throw new Error('Theme toggle button not found')
 
-const isDark = document.documentElement.classList.contains('dark')
+  const isDark = document.documentElement.classList.contains('dark')
-TOGGLE.setAttribute('aria-pressed', String(isDark))
-
-function SWITCH() {
-  const isDark = !TOGGLE.matches('[aria-pressed=true]')
   TOGGLE.setAttribute('aria-pressed', String(isDark))
-  const newTheme = isDark ? 'dark' : 'light'
-  document.documentElement.classList.toggle('dark', isDark)
-  localStorage.setItem('theme', newTheme)
-}
 
-function TOGGLE_THEME() {
+  function SWITCH() {
-  if (!document.startViewTransition) {
+    const isDark = !TOGGLE.matches('[aria-pressed=true]')
-    SWITCH()
+    TOGGLE.setAttribute('aria-pressed', String(isDark))
-    return
+    const newTheme = isDark ? 'dark' : 'light'
+    document.documentElement.classList.toggle('dark', isDark)
+    localStorage.setItem('theme', newTheme)
   }
-  document.startViewTransition(SWITCH)
-}
 
-TOGGLE.addEventListener('click', TOGGLE_THEME)
+  function TOGGLE_THEME() {
+    if (!document.startViewTransition) {
+      SWITCH()
+      return
+    }
+    document.startViewTransition(SWITCH)
+  }
+
+  TOGGLE.addEventListener('click', TOGGLE_THEME)
 </script>
 
+<style>
+  [aria-pressed='true'] .moon-icon,
+  .sun-icon {
+    display: none;
+  }
+  [aria-pressed='true'] .sun-icon {
+    display: block;
+  }
+</style>
+
 <button
   aria-pressed="false"
   aria-label="Theme Toggle Button"
-  class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary [&[aria-pressed='true']_.sun-icon]:block [&_.sun-icon]:hidden [&[aria-pressed='true']_.moon-icon]:hidden"
+  class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary"
 >
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
     <g>

src/styles/global.css

@@ -4,10 +4,10 @@
     --uno-colors-background: theme('colors.background');
   }
 html {
-  --at-apply: 'min-h-screen min-h-dvh scroll-smooth antialiased text-62.5%';
+  --at-apply: 'h-[-webkit-fill-available] scroll-smooth antialiased text-62.5%';
 }
 body {
-  --at-apply: 'min-h-screen min-h-dvh bg-background text-primary text-1.6rem';
+  --at-apply: 'min-h-screen min-h-[-webkit-fill-available] bg-background text-primary text-1.6rem';
 }
 @supports not (view-transition-name: none) {
   body {