fix: theme toggle now properly handles auto mode

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:
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
+11 -2
View File
@@ -7,9 +7,11 @@ def test_theme_cycles_on_click(page, live_server: str) -> None:
"""Clicking theme button cycles data-theme attribute: auto -> light -> dark -> auto."""
page.goto(f"{live_server}/", wait_until="domcontentloaded")
# Initial state: auto (default from base.html)
# Initial state: auto — the attribute must be ABSENT, not "auto". Pico's
# OS-dark block is keyed on `:root:not([data-theme])`, so any value pins
# Pico to its light theme while app.css follows the OS into dark.
initial_theme = page.evaluate("document.documentElement.getAttribute('data-theme')")
assert initial_theme == "auto"
assert initial_theme is None
# Click once -> light
page.click("button[aria-label='auto']")
@@ -27,6 +29,13 @@ def test_theme_cycles_on_click(page, live_server: str) -> None:
)
assert page.evaluate("document.documentElement.getAttribute('data-theme')") == "dark"
# Click again -> auto, which removes the attribute again
page.click("button[aria-label='dark']")
page.wait_for_function(
"!document.documentElement.hasAttribute('data-theme')",
timeout=2000,
)
def test_theme_persists_across_reload(page, live_server: str) -> None:
"""After clicking theme toggle, the chosen theme is restored on reload."""