Theming

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.

Named themes via data-theme

The 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>
Copy

Authoring your own theme

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;
}
Copy

<rechat-root data-theme="compass">…</rechat-root>
Copy

Only the variables you redeclare differ from the rechat defaults; every other token inherits.

Overriding individual variables

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";
}
Copy

The reference tables below list every variable, its default, and what it controls.

Design-system components

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.

Brand Color

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

Status Colors

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

Map

Variable	Default
--rechat-theme-pin-color	#e3001b

Typography

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

Layout

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

Skeleton Loading

Variable	Default
--rechat-theme-skeleton-base-color	#ebebeb
--rechat-theme-skeleton-highlight-color	#f5f5f5
--rechat-theme-skeleton-animation-duration	1.5s

Listing Card

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)

Testimonial Card

<rechat-testimonials> renders in the light DOM, so its cards pick up the active theme and can be styled with plain CSS. There are no testimonial-specific variables; the card uses the shared surface tokens:

Variable	Used for
--rechat-card-background	Card background
--rechat-border-opaque	Card border
--rechat-content-secondary	Author line
--rechat-skeleton-background	Loading placeholder lines

Class hooks:

Class	Element
.testimonials__root	Wrapper around the list and the "Load more" button
.testimonials__list	The card grid (auto-fill columns, 280px minimum)
.testimonials__load-more	"Load more" button row
.testimonials__empty-state	Built-in "No testimonials yet" message (see empty_message)
.testimonial-card	One testimonial (<blockquote>)
.testimonial-card__rating	Star rating
.testimonial-card__content	Testimonial text
.testimonial-card__author	Author name (<cite>)
.testimonial-card--skeleton	Loading placeholder card

rechat-testimonials .testimonials__list {
  grid-template-columns: repeat(3, 1fr);
}

rechat-testimonials .testimonial-card__rating {
  color: #f59e0b;
}
Copy