svelte-tourlight GitHub

Themes

Light, dark, auto (follows prefers-color-scheme) or your own tokens. Defaults sit in :where(), so plain CSS on .tourlight-root always wins.

Tour theme

The setting applies to every demo on this site until you change it.

Using daisyUI or another data-theme system?

The overlay root is marked data-tourlight-theme, not data-theme. daisyUI switches its themes on [data-theme], so a dark tour no longer pulls daisyUI's dark --color-* values into the overlay. To match your app, map the tokens yourself: .tourlight-root { --tourlight-primary: var(--color-primary) }.

Theming 
<!-- Built in -->
<SpotlightProvider theme="light">
<SpotlightProvider theme="dark">
<SpotlightProvider theme="auto"> <!-- follows prefers-color-scheme -->

<!-- Custom tokens on top of a base -->
<SpotlightProvider theme={{ base: 'dark', primary: '#f59e0b', radius: '4px' }}>

/* The root carries data-tourlight-theme="dark", never data-theme,
   so daisyUI's [data-theme] themes don't leak into the overlay. */

/* Or plain CSS, using your design tokens */
.tourlight-root {
  --tourlight-primary: var(--color-primary);
  --tourlight-bg: var(--color-surface);
  --tourlight-z-overlay: 60;
  --tourlight-z-tooltip: 61;
}