Add a theme toggle to the nav, and centralise the palette
Three states rather than two: system (follow the OS), light, dark. A two-state toggle cannot express "just do what my laptop does", which is the state most people actually want. Two details that are easy to get wrong and were both handled deliberately: - The dark rules are guarded with :root:not([data-theme="light"]). Without that guard, choosing light does nothing on a machine whose OS is set to dark, because the media query keeps winning -- the toggle appears to work in one direction only. - The stored theme is applied by an inline script placed ahead of any rendered content, so there is no flash of the wrong palette on load. A deferred script would repaint after first paint, visibly. localStorage access is wrapped in try/catch: it throws outright in some private-browsing modes, and a theme preference is not worth a broken page. The palette moved out of all four templates into _theme.html, which also removes four near-identical copies of the nav CSS that had already started to drift. Tests assert the toggle, the guard, the pre-paint ordering, and that no page redeclares the palette locally.
This commit is contained in:
1 parent
7f402f22fe
commit
8ed007a75f
7 files changed
+97
-47
No files matched your search
@@ -243,3 +243,27 @@ def test_every_page_carries_the_nav(client, path, active):
|
||||
for target in ("/tune", "/config", "/digest"):
|
||||
assert f'href="{target}"' in html, f"{path} is missing a link to {target}"
|
||||
assert f'class="here">{active}<' in html, f"{path} does not mark itself active"
|
||||
|
||||
|
||||
@pytest.mark.parametrize("path", ["/", "/tune", "/config", "/digest"])
|
||||
def test_every_page_has_a_working_theme_toggle(client, path):
|
||||
"""Three states (system/light/dark), no flash, and the guard that makes the
|
||||
light choice win over a dark OS setting."""
|
||||
c, _ = client
|
||||
html = c.get(path).text
|
||||
assert 'id="theme"' in html, "theme button missing"
|
||||
assert '[data-theme="dark"]' in html, "explicit dark rules missing"
|
||||
assert ':root:not([data-theme="light"])' in html, (
|
||||
"without this guard, choosing light does nothing under a dark OS theme")
|
||||
# The theme must be applied before first paint, so its script has to appear
|
||||
# ahead of any rendered content.
|
||||
assert html.index("localStorage.getItem('theme')") < html.index("<main")
|
||||
|
||||
|
||||
@pytest.mark.parametrize("path", ["/", "/tune", "/config", "/digest"])
|
||||
def test_palette_is_defined_once_from_the_shared_partial(client, path):
|
||||
"""A page that redeclares the palette locally would drift from the others."""
|
||||
c, _ = client
|
||||
html = c.get(path).text
|
||||
assert html.count(".sitenav {") == 1
|
||||
assert html.count("--accent:#7c3aed") == 1, "light palette declared more than once"
|
||||
Reference in new issue
Block a user