# code/editor/pierre-theme (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/pierre-theme.ts](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts).

## Constants

### `DIFFS_HOST_STYLE`

Constant.

Host-level variables for `<diffs-container>` (PatchDiff / File / FileDiff).

```ts
const DIFFS_HOST_STYLE: CSSProperties & Record<`--${string}`, string>
```

Source: [ui/src/code/editor/pierre-theme.ts:14](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts#L14)

### `DIFFS_UNSAFE_CSS`

Constant.

Structural restyle inside the diffs shadow root: compact header, our border colour, edge-bar
hover, selection, gutter button, and the link, find and reveal styles other modules rely on.

```ts
const DIFFS_UNSAFE_CSS = ...
```

Source: [ui/src/code/editor/pierre-theme.ts:58](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts#L58)

### `PREFERRED_HIGHLIGHTER`

Constant.

@pierre/highlights for every pierre view and the worker pool: hand-written
WebAssembly lexers, no regex grammars to backtrack for seconds on a line,
and the same lexers the code blocks use (`code/highlights.ts`).

```ts
const PREFERRED_HIGHLIGHTER = ...
```

Source: [ui/src/code/editor/pierre-theme.ts:45](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts#L45)

### `TREES_HOST_STYLE`

Constant.

Host-level variables for `<file-tree-container>`.

```ts
const TREES_HOST_STYLE: CSSProperties & Record<`--${string}`, string>
```

Source: [ui/src/code/editor/pierre-theme.ts:124](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts#L124)

### `TREES_UNSAFE_CSS`

Constant.

Structural restyle inside the file tree's shadow root: rounded rows, no fill behind truncation markers.

```ts
const TREES_UNSAFE_CSS = ...
```

Source: [ui/src/code/editor/pierre-theme.ts:151](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts#L151)

### `VIRTUALIZER_CONFIG`

Constant.

What a pierre Virtualizer renders beyond the viewport. Its defaults (1000px
rendered, 4000px observed) mount several screens of lines at once; this
still covers a fast scroll.

```ts
const VIRTUALIZER_CONFIG: { intersectionObserverMargin: number; overscrollSize: number }
```

Source: [ui/src/code/editor/pierre-theme.ts:52](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/pierre-theme.ts#L52)