The SDK exposes its visual surface as CSS custom properties. You can
restyle individual values in place, or activate a complete named theme
via the data-theme HTML attribute. Either approach is pure CSS -
nothing to register from JavaScript.
data-themeThe SDK ships two themes:
| Name | What it does |
|---|---|
rechat |
Default look. Applied implicitly to :root. |
compact |
Reduced scaling (0.8), sharper corners, tighter spacing. |
Activate one by setting data-theme on <rechat-root> (or any ancestor
such as <body> - CSS custom properties inherit through Shadow DOM):
<rechat-root data-theme="compact">
<rechat-listings>…</rechat-listings>
</rechat-root>
A brokerage adds a custom theme by writing one CSS block on their site - no SDK build step:
[data-theme="compass"] {
--rechat-theme-secondary-9: #1a73e8;
--rechat-theme-radius-factor: 0.5;
--rechat-theme-status-active: #2e7d32;
}
<rechat-root data-theme="compass">…</rechat-root>
Only the variables you redeclare differ from the rechat defaults; every
other token inherits.
To tweak a few values without declaring a named theme, set them on
:root (or any ancestor of <rechat-root>):
:root {
--rechat-theme-secondary-9: #e63946;
--rechat-theme-text-font-family: "Georgia";
}
The reference tables below list every variable, its default, and what it controls.
The SDK is migrating its elements onto a shared component library. Those
components read their own --rechat-* design tokens, but every token
whose role appears in the tables below chains to the --rechat-theme-*
variable documented here. So the variables on this page stay the single
place you re-theme an embed - --rechat-theme-scaling,
--rechat-theme-radius-factor and data-theme="compact" keep applying,
and your existing overrides keep working, as elements move across.
The design tokens themselves are internal: prefer the documented variables below, which are the supported surface.
| Variable | Default | Description |
|---|---|---|
--rechat-theme-secondary-9 |
#0b73da |
Primary interactive color |
--rechat-theme-secondary-10 |
#0065cb |
Hover state |
--rechat-theme-secondary-11 |
#0671d8 |
Link/text variant |
--rechat-theme-secondary-12 |
#0c3361 |
Dark variant |
| Variable | Default |
|---|---|
--rechat-theme-status-active |
#008b46 |
--rechat-theme-status-pending |
#e78700 |
--rechat-theme-status-sold |
#e33104 |
--rechat-theme-status-leased |
#64B5F6 |
--rechat-theme-status-other |
#8e8e8e |
| Variable | Default |
|---|---|
--rechat-theme-pin-color |
#e3001b |
| Variable | Default |
|---|---|
--rechat-theme-text-font-family |
"Lato" |
--rechat-theme-text-primary |
var(--rechat-theme-gray-12) |
--rechat-theme-text-secondary |
var(--rechat-theme-gray-a10) |
--rechat-theme-text-error |
#ff0033 |
| Variable | Default | Description |
|---|---|---|
--rechat-theme-scaling |
1 |
Global spacing/size multiplier |
--rechat-theme-radius-factor |
1 |
Border radius multiplier (0 = sharp) |
--rechat-theme-background-color |
white |
Panel/card background |
| Variable | Default |
|---|---|
--rechat-theme-skeleton-base-color |
#ebebeb |
--rechat-theme-skeleton-highlight-color |
#f5f5f5 |
--rechat-theme-skeleton-animation-duration |
1.5s |
| Variable | Default |
|---|---|
--rechat-theme-listing-card-box-shadow |
0px 4px 4px var(--rechat-theme-accent-a3) |
--rechat-theme-listing-card-highlighted-box-shadow |
0px 2px 4px var(--rechat-theme-accent-a8) |