Theming the viewer
How a scene's appearance is set in Studio and applied by the viewer: modes, colourways, the surfaces you can theme, and why leaving fields empty is the right default.
How a published scene looks is decided in Studio and applied by the viewer your customers open. The template travels with the scene, and the viewer turns it into CSS custom properties when the page renders. Nothing is compiled, and nothing needs a rebuild — change the template, republish, and the next visitor gets it.
It is off until you turn it on
Theming has an enabled flag, and while it is off the viewer uses its built-in appearance. That is not a fallback that approximates your theme — it is the exact default, so a scene with theming off looks identical to one created before theming existed.
Once it is on, every field is still independent. An empty field inherits rather than blanking the surface it controls, which means you can set two things and leave forty alone.
Leave a field empty and you inherit. That is the difference between a theme that ages well and one you re-tune every time the viewer improves.
Mode and colourway
A scene is either light or dark. Each mode carries a colourway — nine values that most of the interface derives from:
Token | What it paints |
| The area behind the 3D view |
| Panels, and panels that sit above other panels |
| Primary and secondary type |
| Dividers and panel edges |
| Interactive colour and its hover state |
| Type and icons that sit on top of the accent |
Supplying a custom colourway is optional. Without one you get the defaults for the mode you chose, which are already coherent — worth starting there and overriding only what clashes with your brand.
What you can theme
Scene page. Background, canvas corner radius, canvas border and shadow, and an optional vignette.
Header. Background, logo, height, text colour, and whether the scene name is shown at all.
Controls. Which corner the viewer controls sit in, and their button style.
Sidebar. Background and border, active and inactive tab treatment, hover state, content background, scrollbar, and the cards inside it.
Conversation. User and assistant bubble colours, avatar border and size, and the maximum width a message is allowed to run to.
Input. Field background, border, text and placeholder colours, and the send button in both its states.
Empty state. The logo, the welcome line, and the suggested opening questions.
Logos. Primary and square marks, each with a dark variant, plus a favicon.
How it reaches the page
The viewer emits one custom property per themed value, all prefixed --scene-. Only fields you actually set are emitted with a value; everything else resolves to inherit. A representative slice:
Custom property | Controls |
| Page background behind the viewer |
| Corner radius of the 3D canvas |
| Opacity of the frosted panel treatment |
| Background of the selected sidebar tab |
| Assistant message bubble |
| Send button background |
Because these are ordinary custom properties resolved at render time, a themed scene costs nothing extra to load and the mode can change without a reload.
The empty state is content, not decoration
The welcome line and the suggested questions are the first thing a visitor reads, and they set the expectation for what the scene is for. Three specific questions about this product will outperform any general invitation to start chatting, because the visitor’s real problem is not knowing what they are allowed to ask.
Embeds inherit all of it
An embedded scene uses the same theme as the full viewer. There is no separate embed skin to maintain and no second place to update when your brand changes.
A sensible order to work in
Pick the mode. Everything else reads differently against light and dark, so changing it later means revisiting your overrides.
Add the logos, including the dark variants. This is the single change that makes a scene stop looking like a demo.
Adjust the colourway only if the defaults clash with your brand.
Override individual surfaces last, and only where something is actually wrong.
The instinct to fill in every field is worth resisting. Each value you set is one you own from then on, and one that will not pick up an improvement to the default.