forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
fix: flash on page transition
+57
-24
+2
-2
src/components/ui/CopyCode.astro
+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
+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
+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
{