Theming

The widget ships with a neutral look that works on most pages. When it should look like your page, set CSS custom properties on the page or on the widget's container — the widget reads them from its host, even though it renders inside a Shadow DOM. Every property has a default, so setting none renders exactly as before.

Properties

Example

Set them on the container, or on :root if every widget on the site should match:

#bookdineplay-widget {
  --bdp-accent: #0f766e;
  --bdp-accent-contrast: #ffffff;
  --bdp-radius: 4px;
  --bdp-font: Georgia, "Times New Roman", serif;
}

No JavaScript change is needed. They are ordinary CSS custom properties resolved by the browser, so changing them later — a theme switcher on your page, say — updates the widget immediately without a re-render.

Light and dark

The theme option of renderBookingWidget selects the palette: light, dark, or auto (the default), which follows the visitor's prefers-color-scheme.

What you cannot change

Layout, spacing, step order and copy are fixed by design so the flow stays tested and accessible on every host page. There is no hook to inject CSS into the shadow root. Hosts that need a different interface can build their own on the same API — the JavaScript SDK guide lists the pure helpers that make that easier.

Next steps

• JavaScript SDK — options and behaviour.
• CDN — pin the exact SDK version your theme was tested with.