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/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>