refactor: update theme color handling and toggle component

- Modify color scheme to resolve theme-color issues
- Refactor theme toggle component and icon

public/image/moon.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="#3d3d3d"><path d="m11.64 12.36c-3.6-3.6-4.14-8.89-2.8-10.66-2.39 1.75-1.88 7.86 1.86 11.6s9.86 4.28 11.6 1.86c-1.77 1.34-7.06.8-10.66-2.8"/><path d="m5.22 4.01a10 10 0 0 1 3.54-2.28c-2.02.47-3.24 1.19-4.54 2.49-4.3 4.3-4.3 11.26 0 15.55 4.29 4.29 11.26 4.3 15.55 0 1.3-1.3 2.27-2.68 2.51-4.6a9.8 9.8 0 0 1 -2.3 3.6c-3.96 3.96-10.48 3.86-14.56-.21-4.08-4.08-4.18-10.6-.21-14.56z"/></g></svg>

public/image/sun.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m4.22 4.22c-4.3 4.3-4.3 11.26 0 15.56s11.26 4.3 15.56 0 4.3-11.26 0-15.56-11.26-4.3-15.56 0m15.17 15.17c-3.63 3.63-9.88 3.26-13.96-.82s-4.45-10.33-.82-13.96 9.88-3.26 13.96.82 4.45 10.33.82 13.96" fill="#3d3d3d"/></svg>

public/image/theme toggle.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" fill="#3d3d3d"/></svg>

src/components/Head.astro

@@ -28,8 +28,8 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 <meta name="author" content={author} />
 <meta name="generator" content={Astro.generator} />
 <meta name="color-scheme" content="light dark" />
-<meta name="theme-color" content="#F7EEEC" media="(prefers-color-scheme: light)" />
+<meta name="theme-color" content={lightMode} media="(prefers-color-scheme: light)" />
-<meta name="theme-color" content="#161616" media="(prefers-color-scheme: dark)" />
+<meta name="theme-color" content={darkMode} media="(prefers-color-scheme: dark)" />
 <meta itemprop="name" content={postTitle || title} />
 <meta itemprop="image" content={postImage || siteScreenshot} />
 <meta itemprop="description" content={postDescription || subtitle} />
@@ -94,9 +94,8 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 
 <!-- Theme Toggle -->
 <script is:inline>
-  const savedTheme = localStorage.getItem('theme')
+  const theme = localStorage.getItem('theme')
-  const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-  const theme = savedTheme || (defaultDark ? 'dark' : 'light')
   document.documentElement.classList.toggle('dark', theme === 'dark')
 </script>
 

src/components/ThemeToggle.astro

@@ -1,58 +1,33 @@
 <script>
-  declare global {
+  // Initialize theme toggle button
-    interface Document {
+  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-      startViewTransition: (callback: () => void) => void
+  themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
-    }
+
+  // Core theme switching logic
+  function switchTheme() {
+    const isDark = document.documentElement.classList.toggle('dark')
+    themeToggle.setAttribute('aria-pressed', String(isDark))
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
   }
 
-  const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
+  // Handle theme toggle with view transitions API
-  if (!TOGGLE)
+  function toggleTheme() {
-    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]')
-    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()
+      switchTheme()
       return
     }
-    document.startViewTransition(SWITCH)
+    document.startViewTransition(switchTheme)
   }
 
-  TOGGLE.addEventListener('click', TOGGLE_THEME)
+  themeToggle.addEventListener('click', toggleTheme)
 </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"
+  class="absolute right-10 top-10 z-999 aspect-square w-8 c-secondary"
 >
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-    <g>
+    <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
-      <path d="m11.64 12.36c-3.6-3.6-4.14-8.89-2.8-10.66-2.39 1.75-1.88 7.86 1.86 11.6s9.86 4.28 11.6 1.86c-1.77 1.34-7.06.8-10.66-2.8" />
-      <path d="m5.22 4.01a10 10 0 0 1 3.54-2.28c-2.02.47-3.24 1.19-4.54 2.49-4.3 4.3-4.3 11.26 0 15.55 4.29 4.29 11.26 4.3 15.55 0 1.3-1.3 2.27-2.68 2.51-4.6a9.8 9.8 0 0 1 -2.3 3.6c-3.96 3.96-10.48 3.86-14.56-.21-4.08-4.08-4.18-10.6-.21-14.56z" />
-    </g>
-  </svg>
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="sun-icon" fill="currentColor">
-    <path d="m4.22 4.22c-4.3 4.3-4.3 11.26 0 15.56s11.26 4.3 15.56 0 4.3-11.26 0-15.56-11.26-4.3-15.56 0m15.17 15.17c-3.63 3.63-9.88 3.26-13.96-.82s-4.45-10.33-.82-13.96 9.88-3.26 13.96.82 4.45 10.33.82 13.96" />
   </svg>
 </button>

src/config/index.ts

@@ -18,7 +18,7 @@ export const themeConfig: ThemeConfig = {
     light: {
       primary: '#17191A', // title text color in light mode
       secondary: '#505050', // post text color in light mode
-      background: '#F7EEEC', // background color in light mode
+      background: '#FAEDE4', // background color in light mode
     },
     dark: {
       primary: '#BEBEBE', // title text color in dark mode

src/types/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Document {
+    startViewTransition: (callback: () => void) => void
+  }
+}
+
+export {}