Themes

GuideFlow ships with a collection of built-in themes that control the look and feel of tour popovers, spotlight overlays, and hotspot beacons.

Available Themes

Theme	Style	Best for
Minimal	Clean, understated	SaaS dashboards, developer tools
Bold	Vibrant, high-contrast	Consumer apps, marketing sites
Glass	Frosted glass, translucent	Modern UIs, dark mode apps
Brutalist	Raw, monospace, bordered	Developer tools, CLI-adjacent UIs
Enterprise	Neutral, accessible	Enterprise software, compliance-heavy UIs

Applying a Theme

Import the theme CSS alongside the base styles:

import '@guideflow/core/styles'
import '@guideflow/core/styles/themes/minimal.css'

Custom Themes

You can create your own theme by overriding CSS custom properties. See Custom Tokens for the full list of available design tokens.

.guideflow-popover {
  --gf-popover-bg: #1a1a2e;
  --gf-popover-color: #e0e0e0;
  --gf-popover-border-radius: 12px;
  --gf-popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}