fix: theme transition error

src/components/Header.astro

@@ -19,6 +19,7 @@ const marginBottom = {
     <a
       href={getLocalizedPath('/')}
       transition:name="site-title"
+      data-disable-transition-on-theme
     >
       {title}
     </a>

src/components/SiteTitle.astro

@@ -11,6 +11,7 @@ const { getLocalizedPath } = getPagePath(currentPath)
   class="mt--1.4 text-8.32 c-secondary font-bold font-title"
   href={getLocalizedPath('/')}
   transition:name="site-title"
+  data-disable-transition-on-theme
 >
   {title}
 </a>

src/components/ThemeToggle.astro

@@ -19,6 +19,7 @@ function toggleTheme() {
 
   // Set temporary transition name for theme toggle
   document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
+  document.documentElement.setAttribute('data-theme-transition', '')
 
   const transition = document.startViewTransition(() => {
     switchTheme()
@@ -27,6 +28,7 @@ function toggleTheme() {
   // Clean up after transition
   transition.finished.then(() => {
     document.documentElement.style.removeProperty('view-transition-name')
+    document.documentElement.removeAttribute('data-theme-transition')
   })
 }
 

src/styles/global.css

@@ -78,10 +78,18 @@ html:not(.dark) {
   z-index: 1;
 }
 
+html[data-theme-transition] [data-disable-transition-on-theme] {
+  view-transition-name: none !important;
+}
+
 @supports not (view-transition-name: none) {
   html:not([data-restore-theme]) {
     --at-apply: 'transition-colors duration-500 ease-in-out';
   }
+
+  html:not([data-restore-theme]) [data-disable-transition-on-theme] {
+    --at-apply: 'transition-none!';
+  }
 }
 
 /* Snell Roundhand static Font */