diff --git a/static/theme.ts b/static/theme.ts index 11e4bdb..c896fee 100644 --- a/static/theme.ts +++ b/static/theme.ts @@ -9,11 +9,11 @@ const getSavedTheme = (): Theme => { } const applyTheme = (theme: Theme): void => { - const html = document.documentElement - html.setAttribute('data-theme', theme) - localStorage.setItem(STORAGE_KEY, theme) - updateToggleButton(theme) -} + const html = document.documentElement + html.setAttribute('data-theme', theme) + localStorage.setItem(STORAGE_KEY, theme) + updateToggleButtons(theme) + } const cycleTheme = (): void => { const current = getSavedTheme() @@ -21,38 +21,51 @@ const cycleTheme = (): void => { applyTheme(next) } -const updateToggleButton = (theme: Theme): void => { - const btn = document.getElementById('theme-toggle') - if (!btn) return +const updateToggleButtons = (theme: Theme): void => { + const headerBtn = document.getElementById('theme-toggle') + const footerBtn = document.getElementById('footer-theme-toggle') + + const updateButton = (btn: HTMLButtonElement | null): void => { + if (!btn) return - const label = btn.querySelector('[data-theme-label]') as HTMLElement | null - if (label) { - label.textContent = theme - } + const label = btn.querySelector('[data-theme-label]') as HTMLElement | null + if (label) { + label.textContent = theme + } - const svg = btn.querySelector('svg') - if (!svg) return + const svg = btn.querySelector('svg') + if (!svg) return - if (theme === 'light') { - svg.innerHTML = '' - svg.setAttribute('stroke', 'currentColor') - svg.setAttribute('fill', 'none') - } else { - svg.innerHTML = '' - svg.setAttribute('stroke', 'currentColor') - svg.setAttribute('fill', 'none') - } -} + if (theme === 'light') { + svg.innerHTML = '' + svg.setAttribute('stroke', 'currentColor') + svg.setAttribute('fill', 'none') + } else { + svg.innerHTML = '' + svg.setAttribute('stroke', 'currentColor') + svg.setAttribute('fill', 'none') + } + } -const initTheme = (): void => { - const saved = getSavedTheme() - applyTheme(saved) + updateButton(headerBtn) + updateButton(footerBtn) + } - const btn = document.getElementById('theme-toggle') - if (btn) { - btn.addEventListener('click', cycleTheme) - } -} + const initTheme = (): void => { + const saved = getSavedTheme() + applyTheme(saved) + + const headerBtn = document.getElementById('theme-toggle') + const footerBtn = document.getElementById('footer-theme-toggle') + + if (headerBtn) { + headerBtn.addEventListener('click', cycleTheme) + } + + if (footerBtn) { + footerBtn.addEventListener('click', cycleTheme) + } + } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initTheme) diff --git a/web/shared/layout/layout.templ b/web/shared/layout/layout.templ index b696cc5..4637476 100644 --- a/web/shared/layout/layout.templ +++ b/web/shared/layout/layout.templ @@ -85,17 +85,7 @@ templ Layout(title string, showHeader bool) { > - - - - - + } @@ -105,9 +95,12 @@ templ Layout(title string, showHeader bool) { }> { children... } -