---
title: "CSS variables | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/css-variables/"
---

# 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.

```css
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.

```typescript
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.

```typescript
editorElement?.style.removeProperty("--au-vs-failed-text-color");
```

## Reference

- [Viewer settings and appearance](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/viewer-settings.md) — enable and configure the viewer states.
- [Settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/headless-editor/settings.md) — the settings that toggle the viewer states.