Rechat SDK
    Preparing search index...

    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.

    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>

    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.

    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)

    Settings

    Member Visibility

    On This Page

    Theming