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

feat: add inline theme script to prevent FOUC

Browse Source
This commit is contained in:
mkelvers
2026-06-05 16:24:07 +02:00
committed by Milas Holsting
parent 2df8b7863d
commit b2f6db8ae1
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/base.gohtml
View File

@@ -11,6 +11,13 @@
<title>MyAnimeList: {{template "title" .}}</title> <title>MyAnimeList: {{template "title" .}}</title>
<link rel="manifest" href="/static/assets/manifest.json"> <link rel="manifest" href="/static/assets/manifest.json">
<link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg">
<script>
(function () {
var theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.dataset.theme = theme;
document.documentElement.style.colorScheme = theme;
})();
</script>
<link rel="stylesheet" href="/dist/tailwind.css"> <link rel="stylesheet" href="/dist/tailwind.css">
<style> <style>
/* Prevent transition on load */ /* Prevent transition on load */
@@ -48,12 +55,6 @@
transition-duration: 300ms; transition-duration: 300ms;
} }
/* Theme toggle icon visibility */
html[data-theme="dark"] .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: block; }
html[data-theme="light"] .theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark { display: block; }
[data-htmx-loading="true"] { [data-htmx-loading="true"] {
opacity: 0.65; opacity: 0.65;
pointer-events: none; pointer-events: none;