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

fix: theme toggle error

Browse source
This commit is contained in:
radishzzz 2025-01-23 12:46:00 +00:00
parent 60f42bd52a
commit 2f52b38100
2 changed files with 13 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/ThemeToggle.astro
View file

@ -1,14 +1,12 @@
<script> <script>
// Initialize theme toggle button // Initialize theme toggle button
const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
// Core theme switching logic // Core theme switching logic
function switchTheme() { function switchTheme() {
const isDark = document.documentElement.classList.toggle('dark') const isDark = document.documentElement.classList.toggle('dark')
themeToggle.setAttribute('aria-pressed', String(isDark)) themeToggle.setAttribute('aria-pressed', String(isDark))
localStorage.setItem('theme', isDark ? 'dark' : 'light') localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
} }
// Handle theme toggle with view transitions API // Handle theme toggle with view transitions API
@ -20,18 +18,8 @@
document.startViewTransition(switchTheme) document.startViewTransition(switchTheme)
} }
// Sync theme state // Event listener
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) themeToggle.addEventListener('click', toggleTheme)
document.addEventListener('astro:after-swap', syncTheme)
window.addEventListener('popstate', syncTheme)
document.addEventListener('DOMContentLoaded', syncTheme)
</script> </script>
<button <button

15
src/layouts/Head.astro
View file

@ -95,10 +95,19 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
<!-- Theme Toggle --> <!-- Theme Toggle -->
<script is:inline define:vars={{ defaultMode: themeConfig.color.mode }}> <script is:inline define:vars={{ defaultMode: themeConfig.color.mode }}>
const systemTheme = matchMedia('(prefers-color-scheme: dark)') function getTheme() {
const theme = localStorage.getItem('theme') const storedTheme = localStorage.getItem('theme')
?? (systemTheme.matches !== null ? (systemTheme.matches ? 'dark' : 'light') : defaultMode) if (storedTheme)
return storedTheme
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
return systemTheme ? 'dark' : defaultMode
}
function updateTheme() {
const theme = localStorage.getItem('theme') || getTheme()
document.documentElement.classList.toggle('dark', theme === 'dark') document.documentElement.classList.toggle('dark', theme === 'dark')
}
updateTheme()
document.addEventListener('astro:after-swap', updateTheme)
</script> </script>
<!-- Google Analytics --> <!-- Google Analytics -->