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

# installHostTheme

> Sets the host's fifteen CSS variables on an element, so a component renders in a test the way it renders in the host.

```ts theme={null}
function installHostTheme(root): void;
```

Sets the host's fifteen CSS variables on an element, so a component renders in
a test the way it renders in the host.

## Parameters

### root

`HTMLElement`

## Returns

`void`

## Remarks

Sets the light values as inline custom properties, which inherit into everything
below the element. The vitest and jest presets call it on
`document.documentElement` for you, so call it yourself only in a test that
renders outside `renderWithTap` or wants the variables on one subtree. It sets
no dark values; drive the mode through `renderWithTap`'s `theme` option, which
is what `useTapTheme` reads.

## Example

```ts theme={null}
import { installHostTheme } from '@tappify/extension-sdk/testing';

function mountRoot(): HTMLElement {
  const root = document.createElement('div');
  installHostTheme(root);
  document.body.append(root);
  return root;
}
```