Theming

Docent looks finished out of the box, and most teams change one thing: the accent color. This page goes from that one change to full control.

The default look

Ink on paper: a near-white card, near-black text and an ink Next button, all tinted very slightly toward violet, with hairline edges instead of heavy borders. It is meant to sit quietly in any product without competing with its brand.

• Your font. The popover inherits your site’s font, so tours feel native. Set the font token only if you want something else.
• Light by default. Dark mode never switches on from the operating system setting, because a dark popover on a light site looks broken. On a dark product, use the dark preset or your own tokens.

Tokens

Tokens are a few named values, such as colors and sizes. They are part of the tour JSON, so they travel with the tour and a builder can set them.

defineTour({
  id: 'welcome',
  options: {
    theme: { accent: '#0d9488', radius: '8px', width: '320px' },
  },
  steps: [ … ],
})

Token	Controls
accent, accentForeground	the Next button’s background and text
background, foreground, muted	the card, its main text, and secondary text
radius, width, shadow	the card’s corners, width and shadow
font	the font family, if not your site’s
overlay, overlayOpacity	the dimmed backdrop’s color and strength
ring, connector	the spotlight ring and drawn arrows
duration	how long transitions take
zIndex	the stacking order, if something of yours sits above tours

Each token becomes a --docent-* CSS custom property, for example --docent-accent. Values are CSS strings, so any CSS color or length works.

LiveTokens set in the tour JSONPlay

Target

Presets

Four ready-made themes ship in a separate entry point, so they add nothing to your bundle unless you import one.

import { dark } from '@docentjs/dom/themes'

createTour(tour, { renderer: { theme: dark } })

Preset	For
light	the default, spelled out, to build on
dark	dark products
minimal	flatter and tighter
contrast	maximum legibility

In React, Vue and Svelte, import presets from @docentjs/react/themes, @docentjs/vue/themes or @docentjs/svelte/themes.

LiveThe contrast presetPlay

Target

Where themes can be set

Themes stack. Each layer overrides only the tokens it sets, from lowest to highest:

1. the renderer’s theme, for every tour in your app,
2. the template’s theme, when the tour names a template,
3. the tour’s options.theme.

A common setup is a preset on the renderer, your brand accent on top, and occasional per-tour tweaks in the JSON.

CSS parts

For anything tokens do not cover, style the popover’s parts from your own stylesheet with ::part():

[data-docent-host]::part(title) {
  letter-spacing: -0.01em;
}
[data-docent-host]::part(button-next) {
  border-radius: 999px;
}

The parts are overlay, ring, connector, popover, arrow, header, title, close, body, media, footer, progress, meter, count, buttons, button, button-next, button-back and button-skip.

Tip

To add CSS inside the shadow root instead, use the renderer’s css option or a template’s css. That lets you target any element, not only named parts.