Themes & backgrounds

A new tab opens dozens of times a day, so the look has to bend to you, not the other way round. butter ships with three themes, three background modes, and a derive-on-pick surface system that keeps the dashboard reading clean even when you pick something unusual.

Themes

Open settings with , and the first section after Account is Theme — three buttons:

• Light. A warm, paper-coloured canvas; widget surfaces mix toward white so cards read as elevated.
• Dark. The brand default — a near-black neutral with amber accent. Surfaces mix toward black so cards read as recessed.
• System. Tracks your OS preference via prefers-color-scheme, switching live if you change it while butter is open.

Theme persists across devices through Chrome's profile sync, so picking dark on your laptop applies to butter on your desktop next time you open it.

Backgrounds

Three background modes, exposed as a segmented switch in settings:

• Default. Use the theme's own neutral background — a stone-warm cream in light, near-black in dark. Cards have their built-in colours.
• Solid. Pick a single hex colour. Eight presets per theme, plus a custom-hex picker for anything else.
• Gradient. Pick a radial-bloom gradient. Six presets per theme, modeled on popular code-editor themes.

Solid presets

Editor-inspired palettes, picked to read as one cohesive scene with the derived widget surfaces — not as a coloured page with white cards pasted on top.

Gradient presets

Radial blooms, lit from a corner or the top edge. The gradient is background-attachment: fixed, so only the dashboard contents scroll — the lit corner stays anchored to the viewport.

Custom hex

Switch the background mode to Solid and a small Custom picker sits below the preset grid. Click it to open a hex input plus a colour wheel — type or paint any colour at all.

butter measures the colour's WCAG-style luminance to decide whether it's "light" or "dark", then derives the widget surface and border colours from it via color-mix(in oklab, ...):

• Light backgrounds get card / hover / elevated surfaces mixed toward white. Borders mix toward black.
• Dark backgrounds get card / hover / elevated mixed toward black. Borders mix toward white.

Going darker on a light background reads as muddy, hence the flip. The upshot: pick a hex of any saturation and the widgets stay visually grounded — you don't end up with cream cards on a navy page or near-white cards on cream.

Small things worth knowing

• Switching themes preserves your background pick. If you have a solid colour set in dark mode and switch to light, the colour snaps to the new theme's first preset (rather than leaving a black background under a white page). Switching back to dark restores a sensible dark default.
• Theme is set before paint. The marketing site and the extension both read the saved theme synchronously before first paint, so you don't see a flash of the wrong palette on cold load.
• Gradients render even cross-mode. If a device synced your gradient choice while you were in light mode, opening butter on a dark-mode device still renders the right preset for that mode — the lookup resolves any ID against the union of light and dark presets.

---