Themes

Buoy ships with seventeen themes. Each is a CSS variable palette referenced from a [data-theme="<id>"] block, so switching is instant and never restarts a watch or reloads the page.

Open Settings, Appearance. Click a theme’s swatch to apply it. The active theme persists across restarts.

Catalog

Dark

ThemeDescription
Dark (default)Deep navy with muted text, easy on long sessions.
DimA softer dark with higher text contrast and warmer surfaces.
SolarizedCalm teal-on-cyan tones.
NordAn arctic palette: icy frost blues on slate.
Gruvbox DarkWarm retro earth tones.
Catppuccin MochaSoft pastel mauves and pinks on dark.
Tokyo NightDeep navy with neon-sign blues and purples.
DraculaVibrant purple, pink, and cyan on slate.
EverforestSage and pine, with forest-floor warmth.
InkwellInk-dark backgrounds with cream parchment text and cool blue accents.
GraphiteNeutral monochrome grays with a steel-blue accent.
AdwaitaGNOME’s flat neutral grays with a confident saturated blue.
PewterMedium neutral gray, neither dark nor light, easy in mixed lighting.

Light

ThemeDescription
LightA sunny palette suitable for slide decks and bright offices.
Solarized LightCream backgrounds with the same teal accents as Solarized.
Adwaita LightSoft warm gray with Tango accents, modeled on Emacs’s adwaita-theme.
Catppuccin LatteThe light half of Catppuccin: pastel mauves on cream.

Impersonation Override

When /as is active, Buoy paints a red border around the entire app, regardless of the active theme. The border clears when impersonation ends. See contexts.md for details on the impersonation lifecycle.

Adding a Theme

There is no in-app theme editor. To add a theme, you would extend the registry in src/state/themes.ts and add a matching [data-theme="<id>"] block in App.css. Pull requests are welcome.


Edit this page on GitLab