kawa/ImpTune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: theme toggle now properly handles auto mode

Browse Source 
Remove data-theme attribute when mode="auto" instead of setting it to
"auto". Pico's OS-dark selector is :root:not([data-theme]), so any
value (even "auto") prevents dark-mode Pico styles. Add Pico form
element background vars and color-scheme: light to match active
theme.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
kawa
2026-08-05 17:18:58 +02:00
co-authored by Claude Haiku 4.5
parent 2c06806814
commit a7a1b05817
6 changed files with 47 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
imptune/templates/base.html
+16 -3
View File
@@ -1,6 +1,10 @@
{% import "partials/icons.html" as ico %}
<!DOCTYPE html>
<html lang="en" data-theme="auto">
{# No data-theme attribute in the "auto" state on purpose: Pico's OS-dark block
is keyed on `:root:not([data-theme])`, so any value at all — even "auto" —
pins Pico to its light theme while app.css switches to its dark tokens. That
mismatch is what produced white-on-white focused inputs. #}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -18,14 +22,23 @@
dark: '<svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z"/></svg>',
auto: '<svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><path d="M12 4v16a8 8 0 0 0 0-16Z" fill="currentColor" stroke="none"/></svg>'
},
// "auto" must *remove* the attribute, not set it to "auto" — see the
// comment on <html> above.
apply() {
if (this.current === 'auto') {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', this.current);
}
},
init() {
document.documentElement.setAttribute('data-theme', this.current);
this.apply();
},
cycle() {
const order = ['light', 'dark', 'auto'];
this.current = order[(order.indexOf(this.current) + 1) % order.length];
localStorage.setItem('imptune_theme', this.current);
document.documentElement.setAttribute('data-theme', this.current);
this.apply();
}
});