Fork of Chiri for Astro for my blog
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: flash on page transition

the3ash a9f2a563 e99799aa

+57 -24
+2 -2
src/components/ui/CopyCode.astro
··· 17 17 </svg> 18 18 ` 19 19 20 - document.documentElement.setAttribute('data-copy-code', copyCode ? 'enabled' : 'disabled') 20 + document.body.setAttribute('data-copy-code', copyCode ? 'enabled' : 'disabled') 21 21 22 22 if (!copyCode) { 23 23 return ··· 147 147 pointer-events: none; 148 148 } 149 149 150 - [data-copy-code='disabled'] .copy-button { 150 + body[data-copy-code='disabled'] .copy-button { 151 151 display: none !important; 152 152 } 153 153
+54 -21
src/components/ui/ThemeManager.astro
··· 1 + <!-- 2 + This is a critical style block to prevent flashing on page load in dark mode. 3 + It is injected into the <head> of the document before the main stylesheets are loaded. 4 + --> 5 + <style is:inline> 6 + :root { 7 + --bg: #ffffff; 8 + } 9 + 10 + html.dark { 11 + --bg: #1c1c1c; 12 + } 13 + 14 + html { 15 + background-color: var(--bg); 16 + color-scheme: light; 17 + } 18 + 19 + html.dark { 20 + color-scheme: dark; 21 + } 22 + </style> 23 + 1 24 <script is:inline> 2 25 // Global Theme Manager 3 26 ;(function () { ··· 90 113 // Initialize theme manager 91 114 window.ThemeManager.init() 92 115 93 - // Listen for Astro page transition events, but delay execution to avoid conflicts with transition animations 94 - document.addEventListener('astro:page-load', () => { 116 + // Apply theme when needed 117 + const applyTheme = () => { 95 118 if (window.ThemeManager) { 96 - // Use requestAnimationFrame to ensure execution in the next frame, avoiding conflicts with transition animations 97 - requestAnimationFrame(() => { 98 - const currentTheme = window.ThemeManager.getEffectiveTheme() 99 - const appliedTheme = document.documentElement.classList.contains('dark') 100 - ? 'dark' 101 - : 'light' 102 - 103 - // Only reapply theme when there's a mismatch to avoid unnecessary flickering 104 - if (currentTheme !== appliedTheme) { 105 - window.ThemeManager.applyTheme(currentTheme) 106 - } 107 - }) 119 + const theme = window.ThemeManager.getEffectiveTheme() 120 + window.ThemeManager.applyTheme(theme) 108 121 } 109 - }) 122 + } 123 + 124 + // Apply immediately on script load 125 + applyTheme() 110 126 111 - // Listen for page transition start event to ensure theme is ready before transition 112 - document.addEventListener('astro:before-preparation', () => { 127 + // Listen for navigation events 128 + document.addEventListener('astro:before-preparation', applyTheme) 129 + 130 + // Apply theme after DOM changes (both swap and page load) 131 + const applyThemeAfterNavigation = () => { 113 132 if (window.ThemeManager) { 114 - const theme = window.ThemeManager.getEffectiveTheme() 115 - // Ensure theme class is applied before transition starts 116 - if (!document.documentElement.classList.contains(theme)) { 117 - document.documentElement.classList.add(theme) 133 + const currentTheme = window.ThemeManager.getEffectiveTheme() 134 + const appliedTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light' 135 + 136 + if (currentTheme !== appliedTheme) { 137 + // Use requestAnimationFrame to ensure theme is applied in the next frame, avoiding conflicts with view transition 138 + requestAnimationFrame(() => { 139 + window.ThemeManager.applyTheme(currentTheme) 140 + }) 118 141 } 142 + } 143 + } 144 + 145 + document.addEventListener('astro:after-swap', applyThemeAfterNavigation) 146 + document.addEventListener('astro:page-load', applyThemeAfterNavigation) 147 + 148 + // Handle system theme changes 149 + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { 150 + if (window.ThemeManager && window.ThemeManager.isUsingSystemTheme()) { 151 + setTimeout(applyTheme, 0) 119 152 } 120 153 }) 121 154 })()
+1 -1
src/layouts/BaseLayout.astro
··· 19 19 20 20 <html lang={language}> 21 21 <head> 22 + <ThemeManager /> 22 23 {fadeAnimation && <ClientRouter />} 23 24 <slot name="head" /> 24 25 </head> ··· 29 30 ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''} 30 31 `} 31 32 > 32 - <ThemeManager /> 33 33 <FaviconThemeSwitcher /> 34 34 35 35 {