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 */
@@ -123,4 +131,4 @@ html:not(.dark) {
   font-display: swap;
   font-weight: 400 700;
   unicode-range: U+91cd, U+65b0, U+7f16, U+6392, U+518d, U+73b0, U+7248, U+5f0f, U+4e4b, U+7f8e, U+6587, U+7ae0, U+6807, U+7b7e, U+5173, U+4e8e, U+6a19, U+7c64, U+95dc, U+65bc, U+8a18, U+4e8b, U+30bf, U+30b0, U+6982, U+8981;
-}
+}