From 42fa1be00f473b6d46b3465d6be416ba579731cc Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Mon, 20 Jan 2025 13:51:19 +0000
Subject: [PATCH] fix: issues in last commit

---
 src/components/Head.astro        |  6 ++--
 src/components/ThemeToggle.astro | 58 +++++++++++++++++++-------------
 src/styles/global.css            |  4 +--
 3 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/Head.astro b/src/components/Head.astro
index 870b12e..91bf64a 100644
--- a/src/components/Head.astro
+++ b/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" media="(prefers-color-scheme: light)" content={`"${lightMode}"`} />
-<meta name="theme-color" media="(prefers-color-scheme: dark)" content={`"${darkMode}"`} />
+<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: dark)" content={darkMode} />
 <meta itemprop="name" content={postTitle || title} />
 <meta itemprop="image" content={postImage || siteScreenshot} />
 <meta itemprop="description" content={postDescription || subtitle} />
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 23c3e4c..95d85a0 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,40 +1,50 @@
 <script>
-declare global {
-  interface Document {
-    startViewTransition: (callback: () => void) => void
+  declare global {
+    interface Document {
+      startViewTransition: (callback: () => void) => void
+    }
   }
-}
 
-const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-if (!TOGGLE)
-  throw new Error('Theme toggle button not found')
+  const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
+  if (!TOGGLE)
+    throw new Error('Theme toggle button not found')
 
-const isDark = document.documentElement.classList.contains('dark')
-TOGGLE.setAttribute('aria-pressed', String(isDark))
-
-function SWITCH() {
-  const isDark = !TOGGLE.matches('[aria-pressed=true]')
+  const isDark = document.documentElement.classList.contains('dark')
   TOGGLE.setAttribute('aria-pressed', String(isDark))
-  const newTheme = isDark ? 'dark' : 'light'
-  document.documentElement.classList.toggle('dark', isDark)
-  localStorage.setItem('theme', newTheme)
-}
 
-function TOGGLE_THEME() {
-  if (!document.startViewTransition) {
-    SWITCH()
-    return
+  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)
   }
-  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>
diff --git a/src/styles/global.css b/src/styles/global.css
index f08393c..9c93846 100644
--- a/src/styles/global.css
+++ b/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 {