Theming

The widget is styled with CSS variables. You can set colours in four places: your Sessiq branding, the embed configuration, per embed, and in your own stylesheet. This page lists the variables and explains which setting wins.

All widget styles are scoped under the sessiq-scope class, which the widget adds to each placeholder. They don't affect the rest of your page, and a defensive reset stops most theme styles on buttons and links from leaking into the widget. Fonts are inherited from your page.

CSS variables

Variable	Default	Set from configuration by	Used for
--sessiq-primary	#3b82f6	primaryColor	Accent colour
--sessiq-button	#10b981	buttonColor	Button background
--sessiq-button-text	#ffffff	—	Button text
--sessiq-button-hover	not set (uses --sessiq-button)	—	Button background on hover
--sessiq-button-hover-text	not set (uses --sessiq-button-text)	—	Button text on hover
--sessiq-button-shadow	not set (none)	—	Button shadow
--sessiq-button-hover-shadow	not set (uses --sessiq-button-shadow)	—	Button shadow on hover
--sessiq-button-radius	6px	—	Button corner radius
--sessiq-button-padding	10px 20px	—	Button padding
--sessiq-button-border	none	—	Button border
--sessiq-button-font-size	14px	—	Button text size
--sessiq-button-weight	600	—	Button font weight
--sessiq-button-transform	none	—	Button text transform, for example uppercase
--sessiq-button-letter-spacing	normal	—	Button letter spacing
--sessiq-text	#1f2937	textColor	Text
--sessiq-text-muted	#6b7280	—	Secondary text
--sessiq-background	#ffffff	backgroundColor	Base panels, including the pop-up booking window
--sessiq-surface	#f9fafb	surfaceColor	Raised panels: headers, rows, steppers
--sessiq-surface-alt	#f3f4f6 (or --sessiq-surface if set)	surfaceAltColor	Deeper neutral: unavailable days, secondary buttons
--sessiq-border	#e5e7eb	borderColor	Borders and dividers
--sessiq-shadow	small shadow	—	Card shadow
--sessiq-shadow-lg	large shadow	—	Raised card shadow
--sessiq-radius	8px	—	Card and panel corner radius
--sessiq-grid-columns	3	data-columns	Columns in product and course grids

For a dark brand, set the neutral palette (backgroundColor, surfaceColor, textColor, borderColor) together with the accent colours. The whole widget, including the pop-up booking window, then follows.

Where colours come from

The widget combines four sources:

1. Your Sessiq branding. The Primary Color and Secondary Color from Settings → Branding in the admin, or the site's Branding Overrides when the embed has a siteId. See Settings and branding.
2. The embed configuration. The colour options passed to Sessiq.init, the WordPress Appearance settings, or the Astro config.
3. Per-embed overrides. WordPress style attributes, the Astro theme prop, or your own inline style on a placeholder.
4. Your stylesheet.

Which colour wins

Branding beats the embed configuration for the accent and button colours. Sessiq.init applies the configured colours at once, so the widget never flashes unstyled. It then loads your branding and applies it on top:

Variable	Final value
--sessiq-primary	Branding Primary Color, else primaryColor from the configuration
--sessiq-button	Branding Secondary Color, else branding Primary Color, else buttonColor from the configuration

Every account has a primary colour in its branding (the default is #3B82F6). So once branding has loaded, primaryColor and buttonColor from the configuration are only used if loading the branding fails. Set your brand colours in the Sessiq admin, not in the embed.

The neutral palette comes only from the embed configuration. Branding does not set background, surface, text or border colours, so backgroundColor, surfaceColor, surfaceAltColor, textColor and borderColor always apply as configured.

Per-embed overrides beat page-wide colours. Page-wide colours are set once on the page's root element and inherited by every widget. An inline --sessiq-* variable on a placeholder is declared directly on that element, so it wins over the inherited value for that embed only. This is how WordPress style attributes and the Astro theme prop work.

caution

The pop-up booking window (use_modal, useModal, openBookingModal) is added at the end of the page, outside your placeholder. Per-embed overrides don't reach it. It uses the page-wide colours.

Override colours in your stylesheet

The widget's own rules use doubled class selectors (.sessiq-scope.sessiq-scope) so theme styles don't beat them by accident. A plain .sessiq-scope { --sessiq-primary: … } rule therefore has no effect.

To set colours page-wide from CSS, set the -config variables that the widget reads its colours from. They exist for primary, button, text, text-muted, background, surface, surface-alt and border:

.sessiq-scope {
  --sessiq-primary-config: #0a7cff;
  --sessiq-button-config: #0a7cff;
  --sessiq-text-muted-config: #5b6470;
}

A rule on .sessiq-scope beats the value the widget sets on the root element, including colours from your branding. The pop-up booking window also carries the sessiq-scope class, so the rule themes it too. This makes your stylesheet the way to override branding colours for the whole page.

To change other variables, such as the button radius, use a per-embed override or a selector that is more specific than the widget's own rule, so it wins whatever order the stylesheets load in:

html .sessiq-scope.sessiq-scope {
  --sessiq-button-radius: 999px;
  --sessiq-button-transform: uppercase;
}