Themes

Eight built-in themes set CSS variables on <html data-theme>, so a switch is one attribute change. Try one: the dossier chrome around this page follows.

const { theme, setTheme, themes } = useTheme();
setTheme("parchment");

Display styles

The status display in the tray below has nine styles: Classic, LCD, Glass, Liquid glass, Readout and Jewel, plus three hi-fi LCD panels modelled on 80s/90s audio components (Deck, Meter and Minimal: a track calendar for pages, a level meter for zoom, labelled mode and status lamps). Each theme picks a matching one (Auto), or choose any style for any theme in the Display row above.

Every style can sit in a surface (flat, bezel and cover glass, neumorphic, glassmorphic, clay or a 3D tilt that follows the pointer) and take effects: island morph (compact at rest, grows for messages), OLED ambient light and odometer digits.

const { setSetting, setSurface, setEffect } = useDisplayStyle();
setSetting("lcd");        // or "auto" to follow the theme
setSurface("bezel");
setEffect("ambient", true);

Pages have their own palette (terminal or paper) in the dossier settings, independent of the chrome.