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: meta theme color flash issue

Browse source
This commit is contained in:
radishzzz 2025-02-18 17:10:40 +00:00
parent 1040aff64c
commit b1777ed0ef
3 changed files with 60 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/Scrollbar.astro
View file

@ -26,7 +26,6 @@ function initScrollbar() {
}
}
document.addEventListener('theme-changed', initScrollbar)
document.addEventListener('astro:after-swap', initScrollbar)
initScrollbar()
</script>

32
src/components/ThemeToggle.astro
View file

@ -19,6 +19,22 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
</button>
<script define:vars={{ lightMode, darkMode }}>
// Update theme
function updateTheme() {
// Toggle website theme
document.documentElement.classList.toggle('dark')
// Get current theme
const isDark = document.documentElement.classList.contains('dark')
// Update meta theme color
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
if (metaThemeColor) {
metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
}
// Update theme configuration in local storage
localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
}
// Bind click event to the button
function setupThemeToggle() {
// Locate theme toggle button
@ -43,22 +59,6 @@ function setupThemeToggle() {
})
}
// Update theme
function updateTheme() {
// Toggle website theme
document.documentElement.classList.toggle('dark')
// Get current theme
const isDark = document.documentElement.classList.contains('dark')
// Update meta theme color
const metaTheme = document.querySelector('meta[name="theme-color"]')
if (metaTheme) {
metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
}
// Update theme configuration in local storage
localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
}
// Initialize click event (on first load or page transition)
document.addEventListener('astro:after-swap', setupThemeToggle)
setupThemeToggle()