Themes

A new tab opens dozens of times a day, so the look has to bend to you, not the other way round. butter ships eight handcrafted themes — four for light mode, four for dark. Each one is a complete palette: the page, the cards, the text ramp, the borders, and a signature accent that every widget picks up, down to the cells of the GitHub contribution heatmap.

Mode first, theme second

Open settings with , and the Appearance section leads with the mode switch:

• Light and Dark do what they say.
• System tracks your OS preference via prefers-color-scheme, switching live if your OS flips mid-session.

You pick one theme per mode — say, Linen for daylight and Tokyo Night after dark — and System glides between your two picks with the sun. The theme cards in settings are live previews rendered in each theme's actual palette, so you can judge them before committing.

The dark four

The light four

What "a complete palette" means

• Every tier re-tints together. A theme pins the page, the card, the text color, and the accent — and every derived shade (muted text, borders, hover states, elevated surfaces) is computed from those, so Dracula's greys are warm-purple greys and Nord's are cold ones. No foreign neutral ever pokes through.
• Accents reach into widgets. The pomodoro ring, the ticker sparklines, the contribution heatmap, selection states, and focus rings all use the theme accent — purple squares on Dracula, frost-blue on Nord, amber on Butter.
• Atmosphere, not wallpaper. Each theme carries a barely-there radial glow tinted with its accent — enough to keep a big empty dashboard from feeling flat, never enough to notice directly. Paper opts out entirely for a flat, clean read.

Upgrading from older versions

Earlier versions of butter had solid-color presets, gradients, and a custom hex picker. Those are gone in favor of the eight themes — a hand-tuned palette beats a derived one every time we compared them. If you had a background set, it migrates to the closest theme automatically: a Dracula gradient becomes the Dracula theme, a warm cream hex becomes light Butter, and so on. Nothing to redo by hand.

Small things worth knowing

• Your picks follow you. Mode and both theme choices ride Chrome's profile sync, so picking Nord on your laptop applies to butter on your desktop next time you open a tab.
• Theme is set before paint. The saved theme is read synchronously before first render — no flash of the wrong palette on a cold load.
• Dark cards sit lighter than the page. House design language: each dark theme's canonical editor background becomes the card color, with a darker sibling behind it as the page, so widgets read as lifted rather than punched out.