CSS variables
The Headless Editor does not render product option controls, design selectors, or action buttons. Apart from the design viewer itself, it only renders built-in states: before initialization, while loading, and after a loading failure. Style these states with the --au-vs- CSS variables.
Override the variables globally on :root, or scope them to a single editor instance.
au-headless-editor {
--au-vs-idle-background: #f5f5f5;
--au-vs-loading-background: #eeeeee;
--au-vs-loading-background-accent: #dddddd;
--au-vs-failed-background: #fff4f2;
--au-vs-failed-text-color: #b42318;
--au-vs-failed-font-family: inherit;
}
Dimensions and layout
| Property | Default | Purpose |
|---|---|---|
--au-vs-base-gap | 16px | Gap between elements of the state view |
--au-vs-base-height | 100% | Height of the state view |
--au-vs-box-width | 100% | Width of the state box |
--au-vs-box-height | 100% | Height of the state box |
--au-vs-box-radius | 0 | Border radius of the state box |
--au-vs-box-ratio | 16 / 10 | Aspect ratio of the state box |
Pre-initialization state
| Property | Default | Purpose |
|---|---|---|
--au-vs-idle-background | #e8e8ee | Background shown before initialization |
Loading state
| Property | Default | Purpose |
|---|---|---|
--au-vs-loading-background-size-width | 200% | Width of the loading shimmer background |
--au-vs-loading-background-size-height | 100% | Height of the loading shimmer background |
--au-vs-loading-background | #f1f1f4 | Base loading background color |
--au-vs-loading-background-accent | #e6e6ea | Accent color of the loading shimmer |
--au-vs-loading-gradient-deg | 90deg | Direction of the loading shimmer gradient |
Failure state
| Property | Default | Purpose |
|---|---|---|
--au-vs-failed-icon-width | 32px | Width of the failure icon |
--au-vs-failed-icon-height | 32px | Height of the failure icon |
--au-vs-failed-background | #fbf0ef | Failure state background |
--au-vs-failed-text-color | #c17b6b | Failure icon and text color |
--au-vs-failed-font-family | inherit | Failure message font |
Change variables dynamically
Set the variables through JavaScript to change the theme at runtime. Setting them on the editor element affects only that instance.
const editorElement = document.querySelector<HTMLElement>("au-headless-editor");
editorElement?.style.setProperty("--au-vs-loading-background", "#eeeeee");
editorElement?.style.setProperty("--au-vs-loading-background-accent", "#dddddd");
editorElement?.style.setProperty("--au-vs-failed-text-color", "#b42318");
Remove an inline override to restore the value inherited from the stylesheet.
editorElement?.style.removeProperty("--au-vs-failed-text-color");
Reference
- Viewer settings and appearance — enable and configure the viewer states.
- Settings — the settings that toggle the viewer states.