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

fix(ui): use event delegation for theme toggle and add cache-busting

Browse Source
This commit is contained in:
mkelvers
2026-04-25 22:32:29 +02:00
parent bebdbc5938
commit 1a02803c80
2 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
static/theme.ts
View File

@@ -61,20 +61,15 @@ const initTheme = (): void => {
const saved = getSavedTheme();
applyTheme(saved);
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);
}
// Use event delegation to handle theme toggles
document.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
const btn = target.closest("#theme-toggle, #footer-theme-toggle") as HTMLButtonElement | null;
if (btn) {
cycleTheme();
}
});
};
if (document.readyState === "loading") {

14
web/shared/layout/layout.templ
View File

@@ -13,17 +13,17 @@ templ Layout(title string, showHeader bool) {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{ title }</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<link rel="stylesheet" href="/dist/tailwind.css?v=1.0.1"/>
<link rel="stylesheet" href="/dist/tailwind.css?v=1.0.2"/>
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
<script>
var t = localStorage.getItem('theme');
if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
</script>
<script src="/dist/static/theme.js" defer></script>
<script src="/dist/static/discover.js" defer></script>
<script src="/dist/static/anime.js" defer></script>
<script src="/dist/static/timezone.js" defer></script>
<script src="/dist/static/player.js" defer></script>
<script src="/dist/static/theme.js?v=1.0.1" defer></script>
<script src="/dist/static/discover.js?v=1.0.1" defer></script>
<script src="/dist/static/anime.js?v=1.0.1" defer></script>
<script src="/dist/static/timezone.js?v=1.0.1" defer></script>
<script src="/dist/static/player.js?v=1.0.1" defer></script>
</head>
<body
class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal flex flex-col"
@@ -120,7 +120,7 @@ templ Layout(title string, showHeader bool) {
</div>
</div>
</footer>
<script src="/dist/static/search.js" defer></script>
<script src="/dist/static/search.js?v=1.0.1" defer></script>
</body>
</html>
}