Theming
Theme every Sessions embed with CSS custom properties. Set them once on `<sessions-context>` (or `:root`) to brand all embeds on the page, or on a single element to theme just that one. Each `--sessions-*` property maps to the embed’s internal design tokens, so a handful of values restyle the whole widget. All are optional — unset properties fall back to a neutral default that adapts to `--sessions-color-scheme`.
Example theme
sessions-context {
--sessions-color-scheme: light;
--sessions-surface: #ffffff;
--sessions-surface-hover: #f4f4f8;
--sessions-border: #e2e2e8;
--sessions-text: #1a1a2e;
--sessions-text-subdued: #71717a;
--sessions-accent: #6366f1;
--sessions-action-text: #ffffff;
}Scheme
Light or dark base for unstyled fallback chrome.
| Property | Description | Example |
|---|---|---|
--sessions-color-scheme | `light` or `dark`. Sets the embed’s base color scheme. | light |
Surfaces
Background layers, from the page surface up to hover fills.
| Property | Description | Example |
|---|---|---|
--sessions-surface | Primary background behind the embed’s content. | #ffffff |
--sessions-surface-hover | Hover/active background for interactive rows + cells. | #f4f4f8 |
--sessions-surface-muted | Subtle background for secondary panels + empty states. | #fafafa |
--sessions-border | Hairline colour for dividers, grid lines, and outlines. | #e2e2e8 |
Text
Foreground colours for primary and secondary copy.
| Property | Description | Example |
|---|---|---|
--sessions-text | Primary text colour. Also seeds the loading skeleton. | #1a1a2e |
--sessions-text-subdued | Secondary text — captions, weekday labels, metadata. | #71717a |
Accent
The brand colour used for primary actions + today markers.
| Property | Description | Example |
|---|---|---|
--sessions-accent | Primary action / highlight colour (buttons, today dot). | #6366f1 |
--sessions-action-text | Text/icon colour rendered on top of the accent colour. | #ffffff |
--sessions-focus | Focus-ring colour for keyboard navigation. | #6366f1 |
Status
Semantic colours for positive + destructive states.
| Property | Description | Example |
|---|---|---|
--sessions-positive | Success / available state (e.g. open spots). | #059669 |
--sessions-destructive | Errors + destructive actions (e.g. cancel). | #dc2626 |
Brand gradient
Optional gradient used in avatar tiles and pass/membership cards. Set the single `--sessions-brand-gradient` for a solid, or the from/to pair for a true gradient.
| Property | Description | Example |
|---|---|---|
--sessions-brand-gradient-from | Start colour of the brand gradient. | #6366f1 |
--sessions-brand-gradient-to | End colour of the brand gradient. | #8b5cf6 |
--sessions-brand-gradient-angle | Gradient angle. | 135deg |