Appearance (light & dark)¶

PiHerder ships with built-in light and dark themes (Raspberry Pi red / green accents). There is no operator custom logo or colour branding in current releases — that is a far-horizon idea only.

How to switch¶

Your choice is stored in the browser (local preference). It does not change other operators’ views.

Light vs dark structure¶

Both themes use the same layout; contrast is token-driven. Stylesheets (loaded from base.html, query-busted):

If light mode ever looks like “one flat white screen”, borders or canvas grey have slipped too close to pure white — fix tokens, not per-page CSS.

About & updates¶

Avatar menu → About shows the project story, logo, running version, and links to GitHub / docs / releases. If a newer GitHub release is available, a dismissible banner appears under the header (per browser). Check for updates on the About page forces a refresh. Disable checks with PIHERDER_UPDATE_CHECK=false (air-gapped).

Ops-hero UI (v0.5.0)¶

Fleet ops pages share a compact ops-hero: primary orb + dual-line stats + optional type chips. Used on:

Dashboard keeps a distinct showcase hero plus a Network maps entry panel (constellation mesh). Login / register use a related mesh treatment (not the ops pulse).

Layout contract (all ops-heroes + dashboard hero):

Heroes and body cards use the full main content width (Account is not clamped narrower than Servers/Jobs). Catalog always draws the viz shell (placeholder if a detail page has no stats) so switching Integrations → Certificates → Templates → Network does not jump chrome height.

Supporting chrome: compact filters (ph-subhead), branded detail modals (ph-detail-modal), mobile service rows that stack actions instead of squashing.

Mobile navigation¶

• Desktop and mobile menus share one nav_items / secondary_items source in base.html (no drift).
• The hamburger slide-out is portaled to body so fixed positioning is not trapped by page overflow (especially Network maps).
• Z-index contract: map fullscreen 100000 · menu backdrop 100090 · menu panel 100100. Opening ☰ exits map fullscreen cleanly (label, aria, and viewport listeners).
• Portrait ↔ landscape: the app recomputes --app-vh / --app-vw, closes the drawer if open, and forces a short reflow so pages rescale without navigating away. Network maps also call PiHerderFabric.refreshLayout (reset map zoom, clear sticky sizes).

Theme CSS not updating after a deploy¶

PiHerder registers a service worker (PWA / push). Older builds cache-first’d CSS, so the browser could keep serving stale tokens until the SW cache was replaced.

Current behaviour: CSS/JS is network-first; shell cache is versioned (piherder-shell-v3+). Stylesheet links are query-busted (themes.css?v=…, fabric.css?v=…, ops.css?v=…).

If a tab still looks unchanged after a theme fix:

1. Hard reload once (or close all PiHerder tabs and reopen).
2. Or DevTools → Application → Service Workers → Unregister, then reload.
3. Or Application → Cache Storage → delete piherder-shell-*.

What theme does not affect¶

• Server data, jobs, or audits
• Self-backup / restore
• API tokens or REST behaviour

Documentation screenshots¶

The public wiki uses light theme + desktop captures by default (print-friendly, consistent).

Capture conventions: wiki/assets/screenshots/README.md · edit flow: Contributing docs.

Related¶

• PWA & Web Push — install to home screen (theme still toggles in-app)
• Network maps — map chrome and mobile list-first
• Theme sandbox (developers): /static/theme-test.html on a running instance