Docs · Theme and platform switches

SDK

Theme and platform switches

Look native on VPlay, and stay current when the platform changes, with no re-release.

Platform switches

host describes VPlay right now: which features are on, limits, the language, which score wins, the running tournament, and the theme. Read it when you draw a button rather than at start-up, or rebuild on the config event, because switches can change while your game is open. Never branch on a version number.

JavaScript
// Switches can change while your game is open. Ask when you draw:
shopButton.hidden = !VPlay.feature("purchases");

// ...or rebuild when VPlay tells you something changed:
VPlay.on("config", () => rebuildMenu());

Theme

Colours are mirrored into CSS variables on the page: --vp-bg, --vp-surface, --vp-surface2, --vp-line, --vp-text, --vp-muted, --vp-accent, --vp-accent2, --vp-danger, --vp-warning, --vp-positive, plus data-vp-theme="dark|light" on the root element.

CSS
body {
  background: var(--vp-bg, #0c0c12);
  color: var(--vp-text, #eee);
}
a { color: var(--vp-accent, #b9ff43); }

Pass autoTheme: false to init and call applyTheme(el) yourself if you want the variables somewhere other than the root.