Preferences
The Preferences panel centralizes your personal settings — appearance, notifications, and model visibility. Open it from the user menu (avatar icon) → Preferences on both desktop and mobile.
Most preferences are stored locally in your browser (localStorage) and persist across sessions. They are not tied to any specific runner. The exception is model visibility, which also syncs to your account on the server so hidden-model choices stay consistent across devices.
Appearance
Section titled “Appearance”Theme mode
Section titled “Theme mode”PizzaPi supports three theme modes:
- Auto — follows your operating system’s
prefers-color-schemesetting and updates automatically if you switch system themes. - Light — forces light mode regardless of system preference.
- Dark — forces dark mode regardless of system preference.
On desktop, the header toolbar has a dedicated theme button that cycles through all three modes without opening Preferences. On mobile, the same cycle lives inside the user dropdown menu.
Theme switches use a smooth 200ms transition to avoid jarring color flashes. A blocking inline script prevents flash of unstyled content (FOUC) on page load — your theme is applied before React hydrates.
Accent colors
Section titled “Accent colors”Choose an accent color that overrides the primary and ring colors throughout the UI. The default is the built-in PizzaPi palette (no override). A Reset color button restores that default.
The picker shows eight preset swatches:
| Accent | Description |
|---|---|
| Blue | Blue primary tones |
| Green | Green primary tones |
| Orange | Warm orange primary tones |
| Purple | Purple primary tones |
| Red | Red primary tones |
| Pink | Pink primary tones |
| Teal | Teal primary tones |
| Yellow | Yellow primary tones |
You can also pick any custom color with the native color picker. The selection is applied by setting --primary and --ring CSS variables on the <html> element; a data-accent="custom" marker is set for styling hooks. Accents compose with light/dark modes — every combination works.
High contrast
Section titled “High contrast”Enable High contrast mode for improved readability. This mode:
- Increases all text/background contrast ratios to 7:1+ (WCAG AAA)
- Switches border colors to maximum-contrast black/white
- Enlarges focus outlines (
3pxoutline with2pxoffset) - Disables decorative animations when
prefers-reduced-motionis active
PizzaPi also respects the prefers-contrast: more media query — if your OS requests higher contrast, it’s enabled automatically.
Font size
Section titled “Font size”Adjust the chat message text size. Choose from Small, Default, or Large. This only affects message content — UI chrome stays at its standard size.
UI density
Section titled “UI density”Controls spacing and padding for message content and headers:
- Compact — tighter padding on messages and headers, ideal for seeing more content
- Default — standard spacing
- Comfortable — more breathing room between messages and headers
Border radius
Section titled “Border radius”Controls the roundness of UI elements (buttons, cards, inputs):
| Option | Value |
|---|---|
| None | Sharp corners (0) |
| Small | Subtle rounding (0.375rem) |
| Default | Standard (0.625rem) |
| Large | Pill-like (1rem) |
Code font
Section titled “Code font”Choose the monospace font used for code blocks, inline code, and the terminal. Options include System (your OS default monospace), JetBrains Mono, Fira Code, and Source Code Pro.
All non-system fonts are bundled with PizzaPi (self-hosted woff2 files, ~500KB total) — no external requests to Google Fonts or CDNs. Fonts load on demand with font-display: swap so there’s no layout shift.
Notifications
Section titled “Notifications”Push notifications
Section titled “Push notifications”Enable browser push notifications to get alerted when sessions need your attention — for example, when an agent asks a question or completes a task.
Suppress child session notifications
Section titled “Suppress child session notifications”When enabled, notifications from child sessions (spawned by a parent agent) are suppressed. Only the parent session’s events trigger notifications. This is useful when orchestrating multiple sub-agents to avoid notification spam.
Haptic feedback
Section titled “Haptic feedback”On devices that support the Vibration API (primarily Android), PizzaPi can provide haptic feedback as agent text streams in. The vibration pulse scales with the length of each text chunk.
Models
Section titled “Models”Model visibility
Section titled “Model visibility”Control which models appear in the model selector dropdown. Hidden models won’t show up when switching models in any session, reducing clutter if you have many providers configured.
Click Manage model visibility to open the model list. Models are grouped by provider and can be toggled individually or by provider. Use the search box to filter by name or provider.