Widget Theme
Give the content widgets, video window, info pop-ups and choice buttons of a work one look — mode, colours, fonts, corners and density, with a live preview.
The widget theme decides how the reader-facing controls of a work look: the content widgets (downloads, audio and video players, scroll text, embedded pages), the video window, info pop-ups from hotspots, choice buttons, the branch chooser and short notices. Your artwork and speech bubbles are not affected.
Opening the Theme tab
- In the editor: Work areas menu (grid icon in the header) → Theme…
- From a widget: Edit work theme… in its Inspector section
- Or open Work Properties (gear icon, Ctrl+,) and choose the Theme tab
Changes show in the live preview at once. They are saved with Save Properties and reach readers with the next publish.
Starter themes
| Starter | Look |
|---|---|
| Dark | Dark cards with an amber accent — the player default |
| Light | White cards with a blue accent |
| Paper | Warm off-white cards, a teal accent and a serif body font, for learning material |
| High contrast | Black cards, white text, a yellow accent and thicker borders |
Applying a starter replaces the current theme; Player default removes the theme. Each starter is a starting point — change any value afterwards.
Settings
| Group | Settings |
|---|---|
| Mode | Dark, Light or Follow the reader's system (light or dark depending on the reader's device) |
| Surface | Card background, text, muted background, muted text, border |
| Accent | Accent (buttons, play), text on accent, links, focus ring |
| Controls | Progress track, progress, waveform, waveform (played) |
| Overlay | Modal backdrop — the only colour with transparency, for example #000000b3 |
| Brand colours | Brand accent and brand primary, used where the theme leaves the accent or card background empty |
| Fonts | Controls and titles and Scroll text, each with a fallback |
| Shape | Corner radius (0–32 px), border width (0–4 px), shadow (none, soft, hard), density (regular or compact) |
Every colour has a picker, a hex field and Reset to derived. An empty field shows the colour the player would use, as (derived). For example, when you only set a dark card background, the text turns light automatically.
The tab warns when text and its background fall below a contrast of 4.5 : 1 (WCAG AA), for example light grey text on white. Preflight reports the same as THEME_LOW_CONTRAST. Readers with low vision need that contrast.
Fonts are not uploaded with the theme. Readers see a font when the reader app, your website or the self-hosted package includes it — PanelWave's own fonts always are, and web-safe fonts such as Georgia or Verdana are on almost every device. Otherwise the fallback is used.
Live preview
The preview runs the real player with a 16:9 sample page: a scroll text, a download, an audio player, a video, a map, an info pop-up and a choice. Switch between Phone and Desktop, play the audio, open the video or the pop-up to check every state. Phone shows the preview beside the settings, filling its column; Desktop shows it across the whole tab above the settings, which then sit in two columns.
Per-widget look
In the Inspector, a widget's Appearance can be Card (the themed card) or Plain: then only the control is drawn on top of the artwork, without a card. Colour overrides for a single widget exist in the format (themeOverrides) and can be set by AI assistants through the MCP tools; the editor keeps one theme per work.
For developers
The theme is stored in the manifest as ui.theme. A website that embeds the player can override any value with the CSS custom properties --pw-theme-*, for example pw-player-shell { --pw-theme-accent: #e11d48; }. See Player configuration.