fix: theme toggle error

- Streamlined theme toggle logic to better synchronize with user preferences and system settings.
- Updated the initialization of the theme to utilize a more robust method for determining the default mode.
- Improved accessibility by ensuring aria attributes are correctly set for the theme toggle button.
- Enhanced global CSS styles for better consistency and added support for view transitions during theme changes.
- Removed redundant code and improved overall readability of the theme toggle component.

src/components/ThemeToggle.astro

@@ -1,39 +1,25 @@
 <script>
   // Initialize theme toggle button
   const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
+  themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
 
-  // Set theme and sync all states
-  function setTheme(isDark: boolean) {
-    const theme = isDark ? 'dark' : 'light'
-    document.documentElement.setAttribute('data-theme', theme)
-    document.documentElement.classList.toggle('dark', isDark)
+  // Core theme switching logic
+  function switchTheme() {
+    const isDark = document.documentElement.classList.toggle('dark')
     themeToggle.setAttribute('aria-pressed', String(isDark))
-    localStorage.setItem('theme', theme)
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
     document.dispatchEvent(new Event('theme-changed'))
   }
 
-  // Initialize theme: use saved preference or fallback to system preference
-  const savedTheme = localStorage.getItem('theme')
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  setTheme(savedTheme ? savedTheme === 'dark' : prefersDark)
-
-  // Toggle theme with view transitions API support
+  // Handle theme toggle with view transitions API
   function toggleTheme() {
-    const isDark = document.documentElement.getAttribute('data-theme') !== 'dark'
     if (!document.startViewTransition) {
-      setTheme(isDark)
+      switchTheme()
       return
     }
-    document.startViewTransition(() => setTheme(isDark))
+    document.startViewTransition(switchTheme)
   }
 
-  // Sync with system theme changes only if user hasn't set a preference
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-    if (!localStorage.getItem('theme')) {
-      setTheme(e.matches)
-    }
-  })
-
   themeToggle.addEventListener('click', toggleTheme)
 </script>
 

src/layouts/Head.astro

@@ -94,9 +94,10 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 {baidu && <meta name="baidu-site-verification" content={baidu} />}
 
 <!-- Theme Toggle -->
-<script is:inline>
+<script is:inline define:vars={{ defaultMode: themeConfig.color.mode }}>
+  const systemTheme = matchMedia('(prefers-color-scheme: dark)')
   const theme = localStorage.getItem('theme')
-    ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    ?? (systemTheme.matches !== null ? (systemTheme.matches ? 'dark' : 'light') : defaultMode)
   document.documentElement.classList.toggle('dark', theme === 'dark')
 </script>
 

src/styles/global.css

@@ -1,90 +1,70 @@
-/* Base settings */
 :root {
-    --uno-colors-primary: theme('colors.primary');
-    --uno-colors-secondary: theme('colors.secondary');
-    --uno-colors-background: theme('colors.background');
-  }
+  --uno-colors-primary: theme('colors.primary');
+  --uno-colors-secondary: theme('colors.secondary');
+  --uno-colors-background: theme('colors.background');
+}
 html {
-  --at-apply: 'scroll-smooth antialiased text-62.5%';
+--at-apply: 'scroll-smooth antialiased text-62.5%';
 }
 body {
-  --at-apply: 'bg-background c-secondary text-1.6rem';
+--at-apply: 'bg-background c-secondary text-1.6rem';
 }
 * {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+scrollbar-width: none;
+-ms-overflow-style: none;
+&::-webkit-scrollbar {
+  display: none;
+}
 }
-/* Typography */
 h1, h2, h3 {
-    text-rendering: optimizeLegibility;
-  }
+  text-rendering: optimizeLegibility;
+}
 h1 {
-  --at-apply: 'text-3.6rem';
+--at-apply: 'text-3.6rem';
 }
 h2 {
-  --at-apply: 'text-3rem';
+--at-apply: 'text-3rem';
 }
 h3 {
-  --at-apply: 'text-2.4rem';
+--at-apply: 'text-2.4rem';
 }
 h4 {
-  --at-apply: 'text-2rem';
+--at-apply: 'text-2rem';
 }
 h5 {
-  --at-apply: 'text-1.8rem';
+--at-apply: 'text-1.8rem';
 }
 h6 {
-  --at-apply: 'text-1.6rem';
+--at-apply: 'text-1.6rem';
 }
-/* Functional styles */
 article img {
-  cursor: zoom-in;
+cursor: zoom-in;
 }
-/* Default to dark theme when system prefers dark mode */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
-    color-scheme: dark;
-  }
-  :root:not([data-theme='light']) html {
-    --at-apply: 'dark';
-  }
-}
-/* When user explicitly chooses dark theme */
-:root[data-theme='dark'] {
-  color-scheme: dark;
-}
-:root[data-theme='dark'] html {
-  --at-apply: 'dark';
-}
-/* Theme toggle animation */
+/* Horizontal reveal animation on theme toggle */
 @keyframes reveal {
-  from {
-    clip-path: inset(var(--from));
-  }
+from {
+  clip-path: inset(var(--from));
+}
 }
 html.dark {
-  --from: 0 0 100% 0;
+--from: 0 0 100% 0;
 }
 html:not(.dark) {
-  --from: 100% 0 0 0;
+--from: 100% 0 0 0;
+}
+::view-transition-new(root) {
+transition: none;
+animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
+clip-path: inset(0 0 0 0);
+z-index: 2;
+}
+::view-transition-old(root) {
+transition: none;
+animation: none;
+z-index: -1;
 }
 @supports not (view-transition-name: none) {
   body {
     --at-apply: 'transition-all duration-500 ease-in-out';
   }
-}
-/* View Transitions */
-::view-transition-new(root) {
-  transition: none;
-  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
-  clip-path: inset(0 0 0 0);
-  z-index: 2;
-}
-::view-transition-old(root) {
-  transition: none;
-  animation: none;
-  z-index: -1;
-}
+  }