# theme.accentColor

Part of [Theme](https://kernstra.com/docs/web-sdk/config/theme) in the Kernstra Web SDK 1.0.0 configuration reference.

- 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' }
```

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