reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 03:56:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: theme toggle fallback animation flash issue (final)

Browse source
This commit is contained in:
radishzzz 2025-01-24 00:30:39 +00:00
parent 00149b251b
commit d4e5fda5d1
4 changed files with 44 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/ThemeToggle.astro
View file

@ -1,41 +1,46 @@
<script>
// Initialize theme toggle button
const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
// Initialize theme toggle button
const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
// Core theme switching logic
function switchTheme() {
const isDark = document.documentElement.classList.toggle('dark')
themeToggle.setAttribute('aria-pressed', String(isDark))
localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
// Core theme switching logic
function switchTheme() {
document.body.removeAttribute('data-restore-theme')
const isDark = document.documentElement.classList.toggle('dark')
themeToggle.setAttribute('aria-pressed', String(isDark))
localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
}
// Handle theme toggle with view transitions API
function toggleTheme() {
if (!document.startViewTransition) {
switchTheme()
return
}
document.startViewTransition(switchTheme)
}
// Handle theme toggle with view transitions API
function toggleTheme() {
if (!document.startViewTransition) {
switchTheme()
return
}
document.startViewTransition(switchTheme)
}
// Sync theme state
function syncTheme() {
const theme = localStorage.getItem('theme')
document.documentElement.classList.toggle('dark', theme === 'dark')
themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
}
// Event listeners
themeToggle.addEventListener('click', toggleTheme)
document.addEventListener('astro:after-swap', syncTheme)
window.addEventListener('popstate', syncTheme)
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
syncTheme()
}
// Sync theme state
function syncTheme() {
document.body.setAttribute('data-restore-theme', 'true')
const theme = localStorage.getItem('theme')
document.documentElement.classList.toggle('dark', theme === 'dark')
themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
requestAnimationFrame(() => {
document.body.removeAttribute('data-restore-theme')
})
}
// Event listeners
themeToggle.addEventListener('click', toggleTheme)
document.addEventListener('astro:after-swap', syncTheme)
window.addEventListener('popstate', syncTheme)
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
syncTheme()
}
})
</script>
<button