Concepts

Themes

Build a visual theme once, reference it by ID across every game. Clone a built-in to start; tweak colors and typography; preview against any game live.

A theme is a small set of color and typography tokens — not a full design system, but enough to make a Playgent embed feel like part of your site rather than a stranger on the page.

Built-in vs custom

Built-in themes ship with every game. Use them by slug: pop-minimal, pop-dark, etc. Edits aren't possible — clone one to make a custom theme.
Custom themes live in your workspace. Edit anytime, reference by ID.

What a theme controls

Token	Effect
`bg`	Page/canvas background.
`surface`	Cards, panels, raised surfaces inside the game.
`accent`	Primary call-to-action color (Play button, focus states, success).
`ink`	Text color over `bg` and `surface`.

Themes also carry a color scheme (light or dark) that flips a handful of secondary tokens, plus typography (font family, weight, corner radius).

Using a theme

The same theme field accepts either a built-in slug or a custom theme ID:

// Built-in
Playgent.init({
  containerId: "playgent-host",
  player: "plyr_acme",
  game: "trivia",
  mode: "daily",
  theme: "pop-dark",
});

// Custom
Playgent.init({
  containerId: "playgent-host",
  player: "plyr_acme",
  game: "trivia",
  mode: "daily",
  theme: "thm_abc123",
});

Or set it on a player so it applies to every embed (recommended).

Where to build one

Hub → Configuration → Themes → New theme. The split-pane editor previews against any game live; switch the preview game to spot-check tokens that read differently across game types.

Theme ID format

Built-in slugs use lowercase kebab-case: pop-minimal, pop-dark. Custom themes use the thm_ prefix: thm_acme_holiday.

Streams

Content modes