melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve typescript error in theme.ts by casting to htmlbuttonelement

Browse Source
This commit is contained in:
mkelvers
2026-04-25 21:57:49 +02:00
parent 431acf6055
commit cb17619c2a
1 changed files with 66 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
static/theme.ts
View File

@@ -1,74 +1,84 @@
type Theme = 'light' | 'dark' type Theme = "light" | "dark";
const STORAGE_KEY = 'theme' const STORAGE_KEY = "theme";
const getSavedTheme = (): Theme => { const getSavedTheme = (): Theme => {
const raw = localStorage.getItem(STORAGE_KEY) const raw = localStorage.getItem(STORAGE_KEY);
if (raw === 'light' || raw === 'dark') return raw if (raw === "light" || raw === "dark") return raw;
return 'dark' return "dark";
} };
const applyTheme = (theme: Theme): void => { const applyTheme = (theme: Theme): void => {
const html = document.documentElement const html = document.documentElement;
html.setAttribute('data-theme', theme) html.setAttribute("data-theme", theme);
localStorage.setItem(STORAGE_KEY, theme) localStorage.setItem(STORAGE_KEY, theme);
updateToggleButtons(theme) updateToggleButtons(theme);
} };
const cycleTheme = (): void => { const cycleTheme = (): void => {
const current = getSavedTheme() const current = getSavedTheme();
const next: Theme = current === 'light' ? 'dark' : 'light' const next: Theme = current === "light" ? "dark" : "light";
applyTheme(next) applyTheme(next);
} };
const updateToggleButtons = (theme: Theme): void => { const updateToggleButtons = (theme: Theme): void => {
const headerBtn = document.getElementById('theme-toggle') const headerBtn = document.getElementById(
const footerBtn = document.getElementById('footer-theme-toggle') "theme-toggle",
) as HTMLButtonElement | null;
const updateButton = (btn: HTMLButtonElement | null): void => { const footerBtn = document.getElementById(
if (!btn) return "footer-theme-toggle",
) as HTMLButtonElement | null;
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null const updateButton = (btn: HTMLButtonElement | null): void => {
if (label) { if (!btn) return;
label.textContent = theme
}
const svg = btn.querySelector('svg') const label = btn.querySelector("[data-theme-label]") as HTMLElement | null;
if (!svg) return if (label) {
label.textContent = theme;
}
if (theme === 'light') { const svg = btn.querySelector("svg");
svg.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>' if (!svg) return;
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
} else {
svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
}
}
updateButton(headerBtn) if (theme === "light") {
updateButton(footerBtn) svg.innerHTML =
} '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>';
svg.setAttribute("stroke", "currentColor");
svg.setAttribute("fill", "none");
} else {
svg.innerHTML =
'<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
svg.setAttribute("stroke", "currentColor");
svg.setAttribute("fill", "none");
}
};
const initTheme = (): void => { updateButton(headerBtn);
const saved = getSavedTheme() updateButton(footerBtn);
applyTheme(saved) };
const headerBtn = document.getElementById('theme-toggle') const initTheme = (): void => {
const footerBtn = document.getElementById('footer-theme-toggle') const saved = getSavedTheme();
applyTheme(saved);
if (headerBtn) {
headerBtn.addEventListener('click', cycleTheme)
}
if (footerBtn) {
footerBtn.addEventListener('click', cycleTheme)
}
}
if (document.readyState === 'loading') { const headerBtn = document.getElementById(
document.addEventListener('DOMContentLoaded', initTheme) "theme-toggle",
) as HTMLButtonElement | null;
const footerBtn = document.getElementById(
"footer-theme-toggle",
) as HTMLButtonElement | null;
if (headerBtn) {
headerBtn.addEventListener("click", cycleTheme);
}
if (footerBtn) {
footerBtn.addEventListener("click", cycleTheme);
}
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initTheme);
} else { } else {
initTheme() initTheme();
} }