Custom Theming for Embedded Comments

8 Mar 2026 · 4 min read

Out of the box the comments widget ships with a light and dark palette that adapts to the user's prefers-color-scheme. But most sites have their own design language and the default look won't always blend in.

CSS Custom Properties

The embed exposes a set of CSS custom properties on the #comments-root element. Override them in your stylesheet to change colours, spacing, and typography without touching the widget source.

#comments-root {
  --cm-bg: #1a1a2e;
  --cm-text: #e0e0e0;
  --cm-accent: #6366f1;
  --cm-radius: 8px;
}

Unstyled Mode

Add data-unstyled="true" to the script tag and the widget will render semantic HTML with no built-in CSS. You bring your own stylesheet and have full control over the look and feel.

Unstyled mode is ideal for design-system-heavy projects where you want comments to feel native to the rest of the UI.

Dark Mode Toggle

Use data-theme="auto" to follow the OS setting, or "light" / "dark" to pin a specific palette.

Comments