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

fix: remove system theme mode

Browse Source
This commit is contained in:
mkelvers
2026-04-21 12:30:34 +02:00
parent 4eae5d55be
commit 1e79e9aecb
2 changed files with 12 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
static/theme.ts
View File

@@ -1,32 +1,23 @@
type Theme = 'system' | '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 'system' return 'dark'
}
const getEffectiveTheme = (theme: Theme): 'light' | 'dark' => {
if (theme !== 'system') return theme
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
} }
const applyTheme = (theme: Theme): void => { const applyTheme = (theme: Theme): void => {
const html = document.documentElement const html = document.documentElement
if (theme === 'system') { html.setAttribute('data-theme', theme)
html.removeAttribute('data-theme')
} else {
html.setAttribute('data-theme', theme)
}
localStorage.setItem(STORAGE_KEY, theme) localStorage.setItem(STORAGE_KEY, theme)
updateToggleButton(theme) updateToggleButton(theme)
} }
const cycleTheme = (): void => { const cycleTheme = (): void => {
const current = getSavedTheme() const current = getSavedTheme()
const next: Theme = current === 'system' ? 'light' : current === 'light' ? 'dark' : 'system' const next: Theme = current === 'light' ? 'dark' : 'light'
applyTheme(next) applyTheme(next)
} }
@@ -46,12 +37,8 @@ const updateToggleButton = (theme: Theme): void => {
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 = '<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('stroke', 'currentColor')
svg.setAttribute('fill', 'none') svg.setAttribute('fill', 'none')
} else if (theme === 'dark') {
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')
} else { } else {
svg.innerHTML = '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' 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('stroke', 'currentColor')
svg.setAttribute('fill', 'none') svg.setAttribute('fill', 'none')
} }
@@ -65,12 +52,6 @@ const initTheme = (): void => {
if (btn) { if (btn) {
btn.addEventListener('click', cycleTheme) btn.addEventListener('click', cycleTheme)
} }
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (getSavedTheme() === 'system') {
applyTheme('system')
}
})
} }
if (document.readyState === 'loading') { if (document.readyState === 'loading') {

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

@@ -16,11 +16,11 @@ templ Layout(title string, showHeader bool) {
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/theme.js" defer></script> <script src="/dist/static/theme.js" defer></script>
<script src="/dist/discover.js" defer></script> <script src="/dist/static/discover.js" defer></script>
<script src="/dist/anime.js" defer></script> <script src="/dist/static/anime.js" defer></script>
<script src="/dist/timezone.js" defer></script> <script src="/dist/static/timezone.js" defer></script>
<script src="/dist/player.js" defer></script> <script src="/dist/static/player.js" defer></script>
</head> </head>
<body <body
class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal" class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal"
@@ -90,8 +90,7 @@ templ Layout(title string, showHeader bool) {
title="Toggle theme" title="Toggle theme"
> >
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2"/> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
<path d="M8 21h8M12 17v4"/>
</svg> </svg>
</button> </button>
</div> </div>
@@ -103,7 +102,7 @@ templ Layout(title string, showHeader bool) {
}> }>
{ children... } { children... }
</main> </main>
<script src="/dist/search.js" defer></script> <script src="/dist/static/search.js" defer></script>
</body> </body>
</html> </html>
} }