Web SDKv1.0.0
Get started (opens in a new tab)Changelog (opens in a new tab)Playground (opens in a new tab)JavaScript PDF viewer (opens in a new tab)Get a free key (opens in a new tab)

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. 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.
ThemeConfigconfig.theme

Example

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

Options 2

mode'light' | 'dark' | 'auto'Default'light'
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 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.
modeTypeScript
theme: { mode: 'auto' }
accentColorstringDefaultnone given (the token's)
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.
accentColorTypeScript
theme: { accentColor: '#e91e63' }

Notes

What a stylesheet of yours may rely on is listed under 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.