Colors and Theme | Phoenix Prediction Docs

Override your look's colors, mode and corners for one page, including the Yes and No colors and the colorblind palette

Your brand color, second color, background tint, Yes and No colors (standard, colorblind or your own), corners and default mode are set once in your look, in the back office. The parameters on this page override them for one page, field by field: anything you leave out keeps your look's value, or the Phoenix default if you have not saved a look.

The embed builds its whole color scheme from a few seeds. Each seed is optional.

Parameters

URL param	Host SDK `theme` field	Values	Default
`mode`	`mode`	`dark`, `light`, or `auto` (the device's setting when the embed starts)	Your look's default mode, else `dark`
`accent`	`accent`	A CSS color, for example `%23F97316` in a URL (`#F97316`)	Your look's brand color, else Phoenix violet `#6E56F0`
`secondary`	`secondary`	A CSS color for your second brand color: the line under the active tab and the mark beside "Top movers today"	Your look's second color, else the accent
`yes`	`yes`	A CSS color for the Yes (or first) side	Your look's Yes color, else green
`no`	`no`	A CSS color for the No (or second) side	Your look's No color, else red
`cb`	`colorblind`	`1` or `true` turns it on and `0` turns it off in a URL; `true` or `false` in the SDK	Your look's Colorblind choice, else off
`neutralHue`	`neutralHue`	0 to 360: the hue that tints backgrounds and surfaces	Your look's background tint, else the accent's hue
`neutralChroma`	`neutralChroma`	0 to 0.1: how strongly surfaces carry that hue (0 is pure grey)	The Phoenix ramp
`tint`	`tint`	A CSS color whose hue and strength the surfaces take, as the look's background tint does (the strength is capped, and a gray means no tint). It replaces `neutralHue` and `neutralChroma`	Your look's background tint, else follows the accent
`radius`	`radius`	0 (the tightest corners, still slightly rounded) to 1 (very round). The look's Sharp, Soft and Round are 0, 0.5 and 1	Your look's corners, else 0.5

Colors accept hex (#F97316), rgb(...), hsl(...), hwb(...), lab(...), lch(...), oklab(...), oklch(...) or a CSS color name; anything else (such as var(...)) falls back to the default. In a URL, encode # as %23. In the URL, a number outside its range is ignored and the default is used; setTheme does not check ranges, so keep radius 0 to 1, neutralHue 0 to 360 and neutralChroma 0 to 0.1.

How the Colors Are Derived

You give seeds, not a palette. From them the embed computes every background, surface, border, text and button color for the chosen mode. Surfaces, text and borders use lightness steps tested for each mode, tinted by your hue:

Accent. Used as given when it is legible on the page background. When it is not (a dark navy accent on a dark theme, say), the embed picks a legible shade of the same hue. The text on accent buttons is chosen for contrast automatically.
Second color. Drawn as the thin line under the active tab (the category bar, and the tabs of an event page and of Portfolio) and as the mark beside "Top movers today". It is checked for legibility like the accent. Leave it out and these use the accent.
Yes and No. Only the hue of your color is used; the embed keeps its own lightness and strength for each mode, so wins and losses always stand out. The custom colors in your look work the same way, and must be clearly different hues (see Yes and No Colors).
Colorblind palette. Turns the Yes side blue, which stays distinct from the No red for players with red-green color blindness. It overrides yes. A page's cb also overrides your look's Colorblind choice: cb=0 turns it off for that page, and Yes shows green (or the page's yes color).
Surface tint. By default surfaces lean slightly toward your accent's hue. Set neutralHue to tint them toward another hue (for example a warm orange accent on a cool navy surface), and neutralChroma to control how much, or give one color as tint.

Examples

Light theme with a green brand and square corners:

?token=JWT&mode=light&accent=%2316A34A&radius=0

A gold accent on a navy surface, with a colorblind-safe palette:

?token=JWT&mode=dark&accent=%23EAB308&neutralHue=250&neutralChroma=0.03&cb=1

Teams' colors for a two-sided market look:

?token=JWT&yes=%232563EB&no=%23DC2626

With the Host SDK, pass the same fields in theme when you mount:

PmmEmbed.mount({
  container: '#market',
  url: 'https://embed.prediction.phoenixverse.io/o/acme',
  token: launchToken,
  theme: { mode: 'light', accent: '#16A34A', radius: 0 },
})

Mode, a hex accent and corner roundness are applied before the first paint, so players see no flash of the default look; the rest of the theme follows as soon as the embed starts. To follow your site's light and dark switch while the embed is open, see Changing the Look at Runtime.