Custom theme
Match the widget exactly to your brand.
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:
| Category | What it controls |
|---|---|
colors | Primary, background, surface, border, text, muted, error. |
typography | Font family, sizes, weights, line heights. |
radii | Corner radii — small, medium, large, extra-large. |
spacing | Spacing scale used in layouts. |
shadows | Elevations for cards, modals, popovers. |
Test your theme
The fastest feedback loop is the local test HTML shipped with the SDK
(examples/widgets/unified-widget-test.html). Point it at your local build,
paste your theme object, and iterate.
When to use a workspace theme instead
If you have multiple sites pointing at the same Medos workspace and you'd rather manage the theme from the dashboard, use auto-fetch instead. Custom themes are best when you need brand precision one site at a time.