Skip to content

Booking Widget

Theming & Dark Mode

Customize the widget's appearance and dark mode behavior.

Dark Mode

When theme="auto" (the default), the widget automatically detects dark mode from:

  1. Your page's dark mode class — if your <html> has a dark class (the Tailwind convention), the widget follows it. Toggling dark mode on your page updates the widget in real-time.
  2. OS preference — if no dark class is found, the widget follows the user's system dark mode setting.

You can also force a specific mode:

  • theme="light" — always light
  • theme="dark" — always dark

Brand Color (Pro)

Your business's brand color is automatically applied to the widget as the accent color for buttons, links, and highlights. Set it in Company Panel → Settings → Branding. No additional embed code needed.

Style Isolation

The widget runs inside a Shadow DOM, so it's fully isolated from your page's CSS. Your styles won't affect the widget, and the widget's styles won't affect your page.