From 77f94f646f600c701de7da9988bd3de19ae1fce5 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Thu, 23 Jan 2025 09:08:16 +0000
Subject: [PATCH] fix: theme toggle error and improve global styles

- Refactored theme toggle logic to synchronize theme state with user preferences and system settings.
- Introduced a new method to set the theme based on saved preferences or system color scheme.
- Updated global CSS to support dark mode by default when the system prefers it, and added functional styles for better user experience.
- Improved theme toggle animation and ensured compatibility with view transitions API.
- Enhanced accessibility by updating aria attributes for the theme toggle button.
---
 src/components/ThemeToggle.astro | 30 ++++++++++++++++++++++--------
 src/styles/global.css            | 32 ++++++++++++++++++++++++++------
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index f608822..f2b9a7a 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,25 +1,39 @@
 <script>
   // Initialize theme toggle button
   const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
 
-  // Core theme switching logic
-  function switchTheme() {
-    const isDark = document.documentElement.classList.toggle('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)
     themeToggle.setAttribute('aria-pressed', String(isDark))
-    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+    localStorage.setItem('theme', theme)
     document.dispatchEvent(new Event('theme-changed'))
   }
 
-  // Handle theme toggle with view transitions API
+  // 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
   function toggleTheme() {
+    const isDark = document.documentElement.getAttribute('data-theme') !== 'dark'
     if (!document.startViewTransition) {
-      switchTheme()
+      setTheme(isDark)
       return
     }
-    document.startViewTransition(switchTheme)
+    document.startViewTransition(() => setTheme(isDark))
   }
 
+  // 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>
 
diff --git a/src/styles/global.css b/src/styles/global.css
index a5c4d0e..82b2922 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,3 +1,4 @@
+/* Base settings */
 :root {
     --uno-colors-primary: theme('colors.primary');
     --uno-colors-secondary: theme('colors.secondary');
@@ -9,11 +10,6 @@ html {
 body {
   --at-apply: 'bg-background c-secondary text-1.6rem';
 }
-@supports not (view-transition-name: none) {
-  body {
-    --at-apply: 'transition-all duration-500 ease-in-out';
-  }
-}
 * {
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -21,6 +17,7 @@ body {
     display: none;
   }
 }
+/* Typography */
 h1, h2, h3 {
     text-rendering: optimizeLegibility;
   }
@@ -42,10 +39,27 @@ h5 {
 h6 {
   --at-apply: 'text-1.6rem';
 }
+/* Functional styles */
 article img {
   cursor: zoom-in;
 }
-/* Horizontal reveal animation on theme toggle */
+/* 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 */
 @keyframes reveal {
   from {
     clip-path: inset(var(--from));
@@ -57,6 +71,12 @@ html.dark {
 html:not(.dark) {
   --from: 100% 0 0 0;
 }
+@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);