diff --git a/static/theme.ts b/static/theme.ts
index 50ed138..11e4bdb 100644
--- a/static/theme.ts
+++ b/static/theme.ts
@@ -1,32 +1,23 @@
-type Theme = 'system' | 'light' | 'dark'
+type Theme = 'light' | 'dark'
const STORAGE_KEY = 'theme'
const getSavedTheme = (): Theme => {
const raw = localStorage.getItem(STORAGE_KEY)
if (raw === 'light' || raw === 'dark') return raw
- return 'system'
-}
-
-const getEffectiveTheme = (theme: Theme): 'light' | 'dark' => {
- if (theme !== 'system') return theme
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ return 'dark'
}
const applyTheme = (theme: Theme): void => {
const html = document.documentElement
- if (theme === 'system') {
- html.removeAttribute('data-theme')
- } else {
- html.setAttribute('data-theme', theme)
- }
+ html.setAttribute('data-theme', theme)
localStorage.setItem(STORAGE_KEY, theme)
updateToggleButton(theme)
}
const cycleTheme = (): void => {
const current = getSavedTheme()
- const next: Theme = current === 'system' ? 'light' : current === 'light' ? 'dark' : 'system'
+ const next: Theme = current === 'light' ? 'dark' : 'light'
applyTheme(next)
}
@@ -46,12 +37,8 @@ const updateToggleButton = (theme: Theme): void => {
svg.innerHTML = ''
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
- } else if (theme === 'dark') {
- svg.innerHTML = ''
- svg.setAttribute('stroke', 'currentColor')
- svg.setAttribute('fill', 'none')
} else {
- svg.innerHTML = ''
+ svg.innerHTML = ''
svg.setAttribute('stroke', 'currentColor')
svg.setAttribute('fill', 'none')
}
@@ -65,12 +52,6 @@ const initTheme = (): void => {
if (btn) {
btn.addEventListener('click', cycleTheme)
}
-
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
- if (getSavedTheme() === 'system') {
- applyTheme('system')
- }
- })
}
if (document.readyState === 'loading') {
diff --git a/web/shared/layout/layout.templ b/web/shared/layout/layout.templ
index 1a81a7a..14c6f67 100644
--- a/web/shared/layout/layout.templ
+++ b/web/shared/layout/layout.templ
@@ -16,11 +16,11 @@ templ Layout(title string, showHeader bool) {
var t = localStorage.getItem('theme');
if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
-
-
-
-
-
+
+
+
+
+
@@ -103,7 +102,7 @@ templ Layout(title string, showHeader bool) {
}>
{ children... }
-
+