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(); const saved = getSavedTheme();
applyTheme(saved); applyTheme(saved);
const headerBtn = document.getElementById( // Use event delegation to handle theme toggles
"theme-toggle", document.addEventListener("click", (e) => {
) as HTMLButtonElement | null; const target = e.target as HTMLElement;
const footerBtn = document.getElementById( const btn = target.closest("#theme-toggle, #footer-theme-toggle") as HTMLButtonElement | null;
"footer-theme-toggle",
) as HTMLButtonElement | null; if (btn) {
cycleTheme();
if (headerBtn) { }
headerBtn.addEventListener("click", cycleTheme); });
}
if (footerBtn) {
footerBtn.addEventListener("click", cycleTheme);
}
}; };
if (document.readyState === "loading") { 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"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{ title }</title> <title>{ title }</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/> <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 src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
<script> <script>
var t = localStorage.getItem('theme'); var t = localStorage.getItem('theme');
if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t); if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
</script> </script>
<script src="/dist/static/theme.js" defer></script> <script src="/dist/static/theme.js?v=1.0.1" defer></script>
<script src="/dist/static/discover.js" defer></script> <script src="/dist/static/discover.js?v=1.0.1" defer></script>
<script src="/dist/static/anime.js" defer></script> <script src="/dist/static/anime.js?v=1.0.1" defer></script>
<script src="/dist/static/timezone.js" defer></script> <script src="/dist/static/timezone.js?v=1.0.1" defer></script>
<script src="/dist/static/player.js" defer></script> <script src="/dist/static/player.js?v=1.0.1" defer></script>
</head> </head>
<body <body
class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal flex flex-col" 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>
</div> </div>
</footer> </footer>
<script src="/dist/static/search.js" defer></script> <script src="/dist/static/search.js?v=1.0.1" defer></script>
</body> </body>
</html> </html>
} }