Changing the Look at Runtime | Phoenix Prediction Docs

Re-theme the running embed, follow your site's light and dark switch, and update branding without a reload

Your look in the back office is set per environment and reaches players on their next load. These Host SDK calls change the look of a running embed from your page, with no reload and no flash, on top of your look and the iframe URL: setTheme for the theme and setBranding for the header. Use them to follow your site's light and dark switch, or to restyle one page.

`setTheme`

setTheme takes the same fields as the mount theme option: mode, accent, secondary, yes, no, colorblind, neutralHue, neutralChroma, tint, radius, font, fontUrl, density, layout, card, oddsFormat, chartCurve, chartAreaFill and palette. It does not check ranges as the URL does: keep radius 0 to 1, neutralHue 0 to 360 and neutralChroma 0 to 0.1.

Send only what changes

setTheme changes only the fields you name; every other field keeps its value. embed.setTheme({ mode: 'light' }) on its own switches to light and keeps your accent, font and spacing. Set a field to null to drop your own value of it: the value from the iframe URL shows again, then your look's, then the default. A font set here overrides your look's whole font: font alone is a Google Fonts family, and font with fontUrl is a font file. An oddsFormat comes from your own page, like the mount theme.oddsFormat and the URL's odds, so it can name any of the six formats whether or not your Betting settings allow it; only a player's own pick in the price menu is limited to the allowed formats. It replaces any format the player picked in the bet slip's price menu during this session; oddsFormat: null drops it, and the page's odds, then your default, shows again (see Which Format Shows).

Set the theme at mount, then send only the change:

const embed = PmmEmbed.mount({
  /* ... */
  theme: { mode: 'dark', accent: '#F97316', neutralHue: 250, neutralChroma: 0.02, font: 'Inter', density: 'compact' },
})

// Follow your site's light and dark switch:
siteThemeToggle.onChange((mode) => embed.setTheme({ mode })) // 'dark' | 'light'

// Drop your own accent; the URL's, then your look's, shows again:
embed.setTheme({ accent: null })

In React, keep the theme object in state and pass it as the theme prop. The theme you mount with travels in the iframe URL, and a later change is sent to the running embed without a reload. A field you remove from the object keeps its last value in the embed; set it to null to drop it.

`setBranding`

setBranding sets the header logo or wordmark. Like setTheme, it changes only the fields you name, and null drops your own value of one (your look's logo then shows again). See Name and Logo.

Without the Host SDK

Both are commands on the Parent Bridge: send { v: 1, ns: 'pmm', kind: 'command', name: 'setTheme', payload: { ...changes } } to the iframe, with the same rules. A density sent this way changes the spacing only; the text size follows the launch's density.