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

# useTapTheme

> Returns the mode the host is drawing in, as { mode: 'light' | 'dark' }.

```ts theme={null}
function useTapTheme(): {
  mode: "light" | "dark";
};
```

Returns the mode the host is drawing in, as `{ mode: 'light' | 'dark' }`.

## Returns

```ts theme={null}
{
  mode: "light" | "dark";
}
```

### mode

```ts theme={null}
mode: "light" | "dark";
```

## Remarks

Re-renders when the owner switches theme. The host's CSS variables already
follow the theme, so reach for this only where a component has to branch in
code rather than restyle, such as a chart's series colours. Throws
`TAP_OUTSIDE_HOST` outside a mount.

## Example

```tsx theme={null}
import { useTapTheme } from '@tappify/extension-sdk';

function SeriesLine() {
  const theme = useTapTheme();
  const stroke = theme.mode === 'dark' ? '#a5b4fc' : '#4f46e5';
  return <svg><line x1="0" y1="0" x2="40" y2="10" stroke={stroke} /></svg>;
}
```