From 693b063489f75329a7a106ba78cf798487ba9b54 Mon Sep 17 00:00:00 2001
From: KazooTTT <yjwang.echo@gmail.com>
Date: Sat, 23 Nov 2024 22:13:37 +0800
Subject: [PATCH] feat: add theme color sync

---
 src/components/GiscusComment.tsx   | 23 +++++++++++
 src/components/layout/Header.astro | 63 ++++++++++++++++++++----------
 2 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/components/GiscusComment.tsx b/src/components/GiscusComment.tsx
index 26afe96..4a1d2eb 100644
--- a/src/components/GiscusComment.tsx
+++ b/src/components/GiscusComment.tsx
@@ -9,10 +9,33 @@ const GiscusComment = () => {
 	const [theme, setTheme] = React.useState('preferred_color_scheme')
 
 	React.useEffect(() => {
+		// Initial theme setup
 		const savedTheme = localStorage.getItem('theme')
 		if (savedTheme) {
 			setTheme(savedTheme)
 		}
+
+		// Listen for theme changes
+		const handleThemeChange = (e: CustomEvent<{ theme: string }>) => {
+			setTheme(e.detail.theme)
+		}
+
+		document.addEventListener('theme-change', handleThemeChange as EventListener)
+
+		// Listen for astro:after-swap events (view transitions)
+		const handleAfterSwap = () => {
+			const currentTheme = localStorage.getItem('theme')
+			if (currentTheme) {
+				setTheme(currentTheme)
+			}
+		}
+
+		document.addEventListener('astro:after-swap', handleAfterSwap)
+
+		return () => {
+			document.removeEventListener('theme-change', handleThemeChange as EventListener)
+			document.removeEventListener('astro:after-swap', handleAfterSwap)
+		}
 	}, [])
 
 	return (
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index facdae9..cee1dd5 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -3,9 +3,9 @@ import kazootttAvatar from '../../assets/kazoottt-avatar.jpeg'
 import { Image } from 'astro:assets'
 ---
 
-<header class='fixed top-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 shadow-sm'>
+<header class='fixed left-0 right-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-800'>
 	<nav
-		class='mx-auto flex w-full items-center justify-between px-4 py-3 sm:flex sm:items-center'
+		class='mx-auto flex w-full items-center justify-between px-4 py-3 sm:flex sm:w-3/5 sm:items-center'
 		aria-label='global'
 	>
 		<a class='flex items-center' href='/'>
@@ -192,28 +192,49 @@ import { Image } from 'astro:assets'
 	function getCurrentTheme() {
 		return localStorage.getItem('theme')
 	}
-	const toggleDarkModeButton = document.getElementById('toggleDarkMode')
-	const mobileMenuButton = document.getElementById('mobileMenuButton')
-	const mobileMenu = document.getElementById('mobileMenu')
 
-	toggleDarkModeButton?.addEventListener('click', () => {
-		const toggleDarkModeEvent = new CustomEvent('theme-change', {
-			detail: { theme: getCurrentTheme() === 'light' ? 'dark' : 'light' }
+	function setupDarkModeToggle() {
+		const toggleDarkModeButton = document.getElementById('toggleDarkMode')
+		if (!toggleDarkModeButton) return
+
+		toggleDarkModeButton.addEventListener('click', () => {
+			const currentTheme = getCurrentTheme()
+			const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
+			localStorage.setItem('theme', newTheme)
+			document.documentElement.classList.toggle('dark')
+
+			// Dispatch theme change event
+			window.dispatchEvent(new CustomEvent('theme-change', { detail: { theme: newTheme } }))
 		})
-		document.dispatchEvent(toggleDarkModeEvent)
-	})
+	}
 
-	mobileMenuButton?.addEventListener('click', () => {
-		mobileMenu?.classList.toggle('hidden')
-	})
+	function setupMobileMenu() {
+		const mobileMenuButton = document.getElementById('mobileMenuButton')
+		const mobileMenu = document.getElementById('mobileMenu')
+		if (!mobileMenuButton || !mobileMenu) return
 
-	// Close mobile menu when clicking outside
-	document.addEventListener('click', (event) => {
-		if (
-			!mobileMenuButton?.contains(event.target as Node) &&
-			!mobileMenu?.contains(event.target as Node)
-		) {
-			mobileMenu?.classList.add('hidden')
-		}
+		mobileMenuButton.addEventListener('click', () => {
+			mobileMenu.classList.toggle('hidden')
+		})
+
+		// Close mobile menu when clicking outside
+		document.addEventListener('click', (event) => {
+			if (
+				!mobileMenuButton.contains(event.target as Node) &&
+				!mobileMenu.contains(event.target as Node)
+			) {
+				mobileMenu.classList.add('hidden')
+			}
+		})
+	}
+
+	// Setup initial functionality
+	setupDarkModeToggle()
+	setupMobileMenu()
+
+	// Re-setup functionality after view transitions
+	document.addEventListener('astro:after-swap', () => {
+		setupDarkModeToggle()
+		setupMobileMenu()
 	})
 </script>