Theming

The widget exposes CSS custom properties so you can match your brand without touching any widget source code.

Stylesheet

The recommended approach — add a rule to your existing stylesheet targeting the booksea-widget element:

booksea-widget {
  --primary-color: #1a6b3c;
  --primary-hover: #145530;
  --font-family: 'Inter', sans-serif;
  --font-size-base: 16px;
}

CSS custom properties

Property	Default	Description
--primary-color	#004963	Primary button and accent colour
--primary-hover	#023044	Hover state for primary elements
--text-primary	#27292f	Main body text colour
--border-color	#666666	Input borders and dividers
--background-light	#f3f3f3	Subtle background for panels
--font-family	'azo-sans-web', 'Roboto', sans-serif	Widget font stack
--font-size-base	18px	Base font size
--font-weight	500	Default font weight

Inline styles

For quick tests or one-off overrides, variables can also be set directly on the element:

<booksea-widget
  company-slug="your-slug"
  style="
    --primary-color: #1a6b3c;
    --primary-hover: #145530;
    --font-family: 'Inter', sans-serif;
    --font-size-base: 16px;
  "
></booksea-widget>