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 raw = localStorage.getItem(STORAGE_KEY)
if (raw === 'light' || raw === 'dark') return raw
return 'dark'
}
const raw = localStorage.getItem(STORAGE_KEY);
if (raw === "light" || raw === "dark") return raw;
return "dark";
};
const applyTheme = (theme: Theme): void => {
const html = document.documentElement
html.setAttribute('data-theme', theme)
localStorage.setItem(STORAGE_KEY, theme)
updateToggleButtons(theme)
}
const html = document.documentElement;
html.setAttribute("data-theme", theme);
localStorage.setItem(STORAGE_KEY, theme);
updateToggleButtons(theme);
};
const cycleTheme = (): void => {
const current = getSavedTheme()
const next: Theme = current === 'light' ? 'dark' : 'light'
applyTheme(next)
}
const current = getSavedTheme();
const next: Theme = current === "light" ? "dark" : "light";
applyTheme(next);
};
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 headerBtn = document.getElementById(
"theme-toggle",
) as HTMLButtonElement | null;
const footerBtn = document.getElementById(
"footer-theme-toggle",
) as HTMLButtonElement | null;
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
if (label) {
label.textContent = theme
}
const updateButton = (btn: HTMLButtonElement | null): void => {
if (!btn) return;
const svg = btn.querySelector('svg')
if (!svg) return
const label = btn.querySelector("[data-theme-label]") as HTMLElement | null;
if (label) {
label.textContent = theme;
}
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.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 svg = btn.querySelector("svg");
if (!svg) return;
updateButton(headerBtn)
updateButton(footerBtn)
}
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.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 => {
const saved = getSavedTheme()
applyTheme(saved)
updateButton(headerBtn);
updateButton(footerBtn);
};
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)
}
}
const initTheme = (): void => {
const saved = getSavedTheme();
applyTheme(saved);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTheme)
const headerBtn = document.getElementById(
"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 {
initTheme()
initTheme();
}