# Theme

Two fields cover the common cases: a light/dark/auto mode, and a single accent color from which the hover and subtle shades are derived. Everything beyond that is done with CSS custom properties — see [Theme tokens](https://kernstra.com/docs/web-sdk/guides/theme-tokens). Every class, data attribute and token the SDK emits carries the fixed `ks` prefix (`.ks-viewer`, `data-ks-size`, `--ks-accent`); it is not configurable.

- Interface: `ThemeConfig`
- Config path: `config.theme`

## Example

```ts
new PDFViewer(container, doc, {
  theme: {
    mode: 'auto', // follow the OS
    accentColor: '#e91e63',
  },
});
```

## Options (2)

### `mode`

- Type: `'light' | 'dark' | 'auto'`
- Default: `'light'`
- Page: https://kernstra.com/docs/web-sdk/config/theme/mode

Theme mode. `'auto'` follows the OS through `prefers-color-scheme`; `'light'` and `'dark'` beat the OS in both directions. Applied as a `data-ks-theme` attribute on the viewer's root element (`.ks-viewer`, inside your container), so two viewers on one page can differ. The **document itself never darkens** — see [Theme tokens](https://kernstra.com/docs/web-sdk/guides/theme-tokens) for what the theme does not touch.

- `'light'`: Default. Light chrome regardless of the OS.
- `'dark'`: Dark chrome regardless of the OS. The document itself never darkens.
- `'auto'`: Follow `prefers-color-scheme`.

```ts
theme: { mode: 'auto' }
```

### `accentColor`

- Type: `string`
- Default: `none given (the token's)`
- Page: https://kernstra.com/docs/web-sdk/config/theme/accentcolor

One color; the hover and subtle shades are derived from it with `color-mix`, so you do not have to supply the family. Leave it out to keep the SDK's indigo. Set as inline custom properties on the viewer's root element (`.ks-viewer`), which is why it is per-viewer rather than global. Any CSS color (`#e91e63`, `rgb(…)`, `oklch(…)`, `color-mix(…)`): a hex, a name or one color function. Anything else — a value that is not a color, or one carrying more than a color — is ignored with a console warning, and the indigo stays: the color is written into a stylesheet, so only a color may reach it.

```ts
theme: { accentColor: '#e91e63' }
```

## Notes

What a stylesheet of yours may rely on is listed under [Theme tokens](https://kernstra.com/docs/web-sdk/guides/theme-tokens): the tokens, the data attributes and the structural classes there; every other class is internal.

A viewer reads `theme` once, when it is built. For light/dark switching without a rebuild, see the "Switching theme live" recipe under [Theme tokens](https://kernstra.com/docs/web-sdk/guides/theme-tokens).


Web page: https://kernstra.com/docs/web-sdk/config/theme