Themes & Branding

Preset themes

Geyed ships with three built-in preset themes you can apply with a single click: Light, Dark, and Blue. Light uses a white background with dark text and a blue primary button. Dark uses a deep navy background with light text and an indigo accent. Blue uses a dark blue background with white text and a sky-blue accent. Select any preset in the theme editor and the live preview updates immediately so you can see how your tooltips will look before saving.

Custom colors

If none of the presets match your brand, select the Custom option in the theme editor to unlock three color fields: Primary Color (used for buttons and interactive highlights), Background (the tooltip card background), and Text Color (all body and title text). Each field accepts a hex value and has an inline color picker alongside it. Custom color choices apply across all tours that use this app's theme.

Transition animations

You can control how tooltips animate between steps using one of five built-in transition styles. The available presets are:

• Smooth — A gentle ease-out entrance with a fade, and a soft upward exit. The default when nothing is configured.
• Snappy — A fast scale-in with a slight spring overshoot, and a quick scale-out exit.
• Fade — A pure opacity crossfade with no positional movement.
• Slide — A directional slide from the left combined with a fade.
• None — Instant appearance and disappearance with no animation. Geyed also falls back to this preset automatically when the user's system has reduced-motion enabled.

Transition style is set in the theme editor under Transition Style and applies as the app-level default. Individual tours or steps can override it with a different preset using the dropdown in the tour detail page.

How themes apply

Themes are configured at the app level in the dashboard. The settings — preset selection, custom colors, and transition style — are saved together as your app's theme configuration and apply to all tours under that app. Individual tours and steps can override the transition animation, but the color preset is shared across the app.

When to customize

Start with one of the built-in presets. Light and Dark cover most products, and Blue works well for dark-UI SaaS tools. Switch to Custom when you need to match a specific brand palette — for example, if your product uses a purple primary color that none of the presets provide. Use the live preview to verify contrast before saving, especially if your tooltip background is a color that closely matches your app's page background.