Add a header, a theme toggle and visible checkboxes
Three pieces of chrome that were missing or misleading. A header with the bowl mark and the app name, on every page. The page title bar below it is no longer sticky: on a phone a tall sticky header eats the screen, and the bottom tab bar already handles navigation. A theme toggle, remembered per device in localStorage, because a shared instance with no accounts should let the kitchen phone and the laptop disagree. Dark by default, and the default lives in the server-rendered markup so it survives with JavaScript off and never flashes. The button shows the theme that is on — moon while dark, sun while light — rather than the one a click would bring, and its label names the state before the action. Both icons ship on every page and CSS picks one, so the server never needs to know what this device chose. Following the system was considered and dropped: a third state costs a control harder to read than the choice is worth. The checkbox chips no longer hide the native control behind opacity: 0. With only a background colour to go on there was no way to tell "Tarjoillaan lisukkeiden kanssa" on from off. Colour is not a state indicator; a checkbox is. This covers the side, category and has_sides chips alike. Smoke checks cover the parts that would regress silently: that dark is the no-JS default, and that both theme icons are present for CSS to choose from.
This commit is contained in:
@@ -206,15 +206,18 @@ regenerates or swaps.
|
||||
shared and has no accounts, so this is a device preference in
|
||||
`localStorage`, never a server-side setting — the phone in the kitchen and
|
||||
the laptop must be able to disagree.
|
||||
- Three states: light, dark, and follow the system. System is the default.
|
||||
- The control **shows the state that is currently active**, not the state
|
||||
clicking it would produce. A segmented control with the active option
|
||||
marked, not a single button labelled with its opposite. A lightswitch does
|
||||
not read "off" while the lights are on.
|
||||
- Implementation is `color-scheme` on the root element: `light dark` for the
|
||||
system-following default, `only light` or `only dark` when overridden.
|
||||
Because the palette is built from `light-dark()` custom properties, no
|
||||
other CSS changes.
|
||||
- Two states only, **dark by default**. Following the system was considered
|
||||
and dropped: a third state costs a control that is harder to read than the
|
||||
choice is worth.
|
||||
- One button, and its icon **is the theme that is currently on** — a moon
|
||||
while dark, a sun while light. Not the state a click would produce. A
|
||||
lightswitch does not read "off" while the lights are on. The accessible
|
||||
label names the state first and the action second: "Tumma teema. Vaihda
|
||||
vaaleaan."
|
||||
- Implementation is `color-scheme` on the root element: `only light` or
|
||||
`only dark`. The default is in the server-rendered markup, so it survives
|
||||
having no JavaScript. Because the palette is built from `light-dark()`
|
||||
custom properties, no other CSS changes.
|
||||
|
||||
## 8. Suggestion algorithm (stage 2)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user