Themes
Choose a status page layout, colour mode and CSS overrides.
Heyo Status ships five layouts. Set theme in heyo-status.config.ts and
pass it to <StatusPage />; the generated framework projects already do both.
One stylesheet contains all five themes, so changing the theme does not
require a different import.
| Theme | Layout |
|---|---|
slate | Default grouped cards, uptime bars and latency sparklines. |
fern | Uptime figures per service over a dense history. |
onyx | Global banner, flat service list and incident timeline. |
dune | Service categories with subcomponent status rows. |
reed | Minimal single column without cards or groups. |
Choose slate or dune for grouped services, onyx for a flat list, fern
for a history-led page or reed for a quieter layout. The config validates
theme names rather than silently choosing another layout.
Colour mode
mode sets the initial preference: "system" (default), "light" or
"dark". In system mode the page follows the operating system. A visitor's
choice from the built-in header toggle is stored under heyo-status-theme in
local storage and takes precedence on later visits.
The generated layouts render statusThemeBootstrapScript(undefined, statusPage.mode) in the document head before paint, preventing a flash of the
wrong palette. If integrating manually, include it in your root layout and
use suppressHydrationWarning on React's <html> element: the script updates
its data-mode attribute before hydration.
Load styles once
The bundled stylesheet includes the tokens for every theme, scoped to the
page's data-theme attribute. Import it once in the root layout; generated
projects also import their own styles/status.css for overrides.
Target data-slot hooks rather than internal Tailwind classes. Check both
light and dark mode after changing tokens. To adjust accent colours, use
Branding; the semantic
up/degraded/down colours remain tied to the status palette.