Styling the messenger

The messenger is light by default and takes the builder's own look, the same way forms do. It does not follow the visitor's operating system, because the form next to it does not either and the two would disagree on the same page.

Every control below exists in all three builders — the Elementor widget, the Bricks element, and the block editor's sidebar. They are defined once, so the three never drift apart.

Start with Layout → Accent

One color moves the buttons, unread counts, the selected conversation, the active tab and your own message bubbles. Most sites need that and nothing else.

The twelve groups

Group	What it covers
Layout	Height, the width of the conversation list and the details panel, corner radius, accent, paper and line colors
Conversation list	Row padding, the name, the preview line, the timestamp, the unread row and its count pip
New message button	The + above the list
Tabs	All / Unread / Archived, and the details panel's tabs — resting and selected
Search boxes	The conversation search, the in-conversation search, and the member picker
Conversation header	The name, the line under it, the avatar, and the buttons on the right
Their messages	Bubble background, text color, typography, radius and padding
My messages	The same, separately — this is where the accent usually lands
Names, badges and receipts	Sender names in a group, the listing badge beside a name, and the Seen line
Listing card	The pinned card naming what the conversation is about
Composer	The box, the field, the placeholder, the send button, the paperclip
Details panel	The panel itself, its list rows, the media grid, and empty-state text

Editing with something to look at

All three builders render a real messenger from sample data while you are editing — a conversation with a subject, one without, an unread count, a reply, a badge and a read receipt.

The sample is invented and recognizably so. A preview that looked like real data would invite somebody to wonder whose it is.

Dark, if you want it

There is no dark mode switch. The colors are custom properties, so a dark messenger is a few of them:

.vxm-msg {
  --vxm-msg-paper: #16181d;
  --vxm-msg-ink: #e8eaed;
  --vxm-msg-ink-2: #9aa0a6;
  --vxm-msg-line: #2a2e35;
  --vxm-msg-sunk: #1e2127;
  --vxm-msg-theirs: #23272e;
}

Set those in the builder's controls, in your theme, or inside your own dark-mode media query — the messenger follows whatever the page decides.

Where the styles land

Each builder writes the controls the way that builder expects: the block editor into block attributes, Elementor into its selectors, Bricks into its css. Nothing is written to a global stylesheet, so two messengers on one site can look different.

A note for Elementor 4: any control carrying a selector goes into Elementor's separate style stack rather than the content stack. That is Elementor's own arrangement, not a missing control — everything listed above is there.