diff --git a/src/components/Header.astro b/src/components/Header.astro index aebcdcd..b329ee2 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -19,6 +19,7 @@ const marginBottom = { {title} diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro index 6d79c50..4c8cd67 100644 --- a/src/components/SiteTitle.astro +++ b/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} diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro index e3d36b5..667d7a0 100644 --- a/src/components/ThemeToggle.astro +++ b/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') }) } diff --git a/src/styles/global.css b/src/styles/global.css index 5375157..55d7607 100644 --- a/src/styles/global.css +++ b/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; -} \ No newline at end of file +}