> ## Documentation Index
> Fetch the complete documentation index at: https://sdk.revise.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance

> Theme, colours, fonts, and zoom.

## Theme

The embed takes its theme from the `theme` prop rather than from the host
page's own class, so several editors on one page can differ, and a dark editor
can sit inside a light application.

```tsx theme={null}
<ReviseEditor theme="dark" initialDocuments={docs} />
```

Omit it and the editor follows the host page.

<Note>
  The theme is scoped to the editor's own subtree, including the canvas. It
  never restyles the page around it.
</Note>

## Colours

Three surfaces are separately tunable. Each is a prop, and each is backed by a
CSS custom property on the editor root if you would rather use a stylesheet.

| Prop               | CSS variable                 | What it paints               |
| ------------------ | ---------------------------- | ---------------------------- |
| `canvasBackground` | `--revise-canvas-background` | The area behind the page     |
| `pageBackground`   | `--bg-page`                  | The paper itself             |
| `pageBorderColor`  | `--page-border`              | The outline around each page |

```tsx theme={null}
<ReviseEditor
  canvasBackground="#b9c6bf"
  pageBackground="#faf6ef"
  pageBorderColor="#42524f"
  initialDocuments={docs}
/>
```

All three accept any CSS value, so gradients work for the canvas:

```tsx theme={null}
<ReviseEditor canvasBackground="linear-gradient(#1b2430, #0b0e14)" />
```

<Tip>
  `pageBackground` reaches the canvas as well as the CSS page tile, so
  canvas-painted details that blend into the paper — image placeholders,
  container fills, table cell backgrounds — follow your colour instead of
  staying white.
</Tip>

## Fonts

Add your application's fonts to the native picker without coupling the DOCX
family name to the browser rendering stack:

```tsx theme={null}
<ReviseEditor
  fonts={[
    {
      family: "Counsel Sans",
      label: "Counsel Sans",
      cssFamily: "'Counsel Sans', Arial, sans-serif",
      fontWeight: 500,
    },
  ]}
  initialDocuments={docs}
/>
```

`family` is canonical: it is stored in the document and written to `.docx`.
`cssFamily` is only used to preview the choice in the browser.

<Warning>
  The registry does not download anything. Loading the font files with
  `@font-face` or a stylesheet remains your responsibility — an unloaded family
  will render in a fallback face and export correctly anyway.
</Warning>

## Zoom

Zoom accepts any positive scale or `"fit-width"`:

```tsx theme={null}
<ReviseEditor defaultZoom="fit-width" initialDocuments={docs} />
```

```ts theme={null}
editor.zoom.setZoom(1.25);
editor.zoom.fitWidth();

const { zoom, scale } = editor.zoom.getState();
```

`zoom` is what was requested; `scale` is the effective canvas scale, which for
`"fit-width"` is computed from the widest page and recomputed when the
container or the comments stack changes. An expanded comments stack is removed
from the available width; a fixed numeric zoom stays fixed and the editor
scrolls horizontally.

Subscribe to follow it in your own UI:

```ts theme={null}
useEffect(() => editor.zoom.subscribe(setZoomState), [editor]);
```

## Layout inside your page

The editor fills its container. Give it a sized parent:

```tsx theme={null}
<div style={{ height: "80vh" }}>
  <ReviseEditor initialDocuments={docs} />
</div>
```

`className` and `style` pass through to the editor root, so your own layout
rules apply normally.