Choose how your published calculator looks with one of three themes, each unlocking a different set of color controls.
All of these live in the Style tab in the editor's left navigation. The Theme dropdown there is the single control that switches between layouts.
The three themes
Side-by-side
Puts the inputs and results on a single page next to each other, instead of stepping the visitor from an input screen to a separate results screen. This is the single-page view, and it is only available on calculator projects.
When Side-by-side is selected you get one color control:
- Color — the project's accent color, applied to buttons and highlights.
Side-by-side intentionally simplifies styling. It hides several controls that only make sense on the two-screen layouts. See Single-page (side-by-side) view for the full list of what changes.
Color Bar
The default two-screen layout. Inputs appear on one screen, results on the next. You get one color control:
- Color — the accent color used for the header bar, buttons, and highlights.
Duotone
A richer two-screen layout that lets you set three colors instead of one:
- Accent Color — buttons, highlights, and key UI accents.
- Background Color — the color behind the calculator card.
- Page Color — the surrounding page color.
Duotone is a good choice when you want a dark or brand-saturated look rather than the light, accent-on-white feel of Color Bar.
How the themes interact
A few rules are worth knowing:
- Side-by-side turns off Color Bar and Duotone. Switching to Side-by-side enables the single-page view; the Color Bar and Duotone color sets are not shown. If you later switch back to Color Bar or Duotone, single-page view is turned off.
- Duotone is only available on the two-screen layouts. You cannot combine Duotone with Side-by-side.
- Switching themes does not delete your colors. If you set Duotone colors, switch to Color Bar, then switch back, your Duotone colors are still there.
Related styling controls
The Theme dropdown only controls layout and color sets. Other appearance controls in the Style tab apply across all themes: