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

98
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 footerBtn = document.getElementById(
"footer-theme-toggle",
) as HTMLButtonElement | null;
const updateButton = (btn: HTMLButtonElement | null): void => { const updateButton = (btn: HTMLButtonElement | null): void => {
if (!btn) return if (!btn) return;
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null const label = btn.querySelector("[data-theme-label]") as HTMLElement | null;
if (label) { if (label) {
label.textContent = theme label.textContent = theme;
} }
const svg = btn.querySelector('svg') const svg = btn.querySelector("svg");
if (!svg) return if (!svg) return;
if (theme === 'light') { if (theme === "light") {
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.innerHTML =
svg.setAttribute('stroke', 'currentColor') '<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('fill', 'none') svg.setAttribute("stroke", "currentColor");
svg.setAttribute("fill", "none");
} else { } else {
svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>' svg.innerHTML =
svg.setAttribute('stroke', 'currentColor') '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
svg.setAttribute('fill', 'none') svg.setAttribute("stroke", "currentColor");
} svg.setAttribute("fill", "none");
} }
};
updateButton(headerBtn) updateButton(headerBtn);
updateButton(footerBtn) updateButton(footerBtn);
} };
const initTheme = (): void => { const initTheme = (): void => {
const saved = getSavedTheme() const saved = getSavedTheme();
applyTheme(saved) applyTheme(saved);
const headerBtn = document.getElementById('theme-toggle') const headerBtn = document.getElementById(
const footerBtn = document.getElementById('footer-theme-toggle') "theme-toggle",
) as HTMLButtonElement | null;
const footerBtn = document.getElementById(
"footer-theme-toggle",
) as HTMLButtonElement | null;
if (headerBtn) { if (headerBtn) {
headerBtn.addEventListener('click', cycleTheme) headerBtn.addEventListener("click", cycleTheme);
} }
if (footerBtn) { if (footerBtn) {
footerBtn.addEventListener('click', cycleTheme) footerBtn.addEventListener("click", cycleTheme);
}
} }
};
if (document.readyState === 'loading') { if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', initTheme) document.addEventListener("DOMContentLoaded", initTheme);
} else { } else {
initTheme() initTheme();
} }