Custom theme

If neither built-in theme fits, pass your own theme object. You can pass a partial override (just the fields you want to change) or a complete theme (every token spelled out).

Partial override

Most brands only need to change colors and radii. Pass a partial theme — the widget merges it into the default:

MedosBooking.init({
  apiKey: "mk_...",
  theme: {
    colors: {
      primary: "#8B6F47",
      primaryHover: "#6F5838",
      background: "#FFFBF5",
      surface: "#FFFFFF",
      border: "#E8D4BC",
      text: "#3D2F1F",
    },
    radii: {
      md: "0.75rem",
      lg: "1rem",
    },
  },
});

Any field you omit keeps the default-theme value. That's usually what you want — you don't have to redefine every shade of gray.

Complete theme

If you're building a design-system-driven site and want full control, pass a complete MedosTheme object. See CSS variables for the full list of tokens the widget exposes.

Token categories

The theme object is grouped into categories:

Every category becomes a CSS variable except breakpoints — see CSS variables for the exact names.

Test your theme

The fastest feedback loop is a plain HTML page with the CDN script tag — put your theme object in MedosBooking.init(), save, and refresh. See the CDN quickstart for a copy-paste starting point.

Keeping several sites consistent

The theme lives in each site's init() call, so there's no central setting that updates every embed at once. If you run multiple sites against one workspace, keep the theme object in a shared snippet or package and import it, rather than copying values into each page.