Theming

Every visual aspect of the editor is driven by CSS custom properties. To restyle the editor, override any of the tokens below in your own stylesheet — no theme provider, no extra deps.

Light, Dark, Auto

<RichTextEditor theme="light" />
<RichTextEditor theme="dark" />
<RichTextEditor theme="auto" />   // follows prefers-color-scheme

Brand override example

/* your-styles.css */
.my-editor {
  --rte-accent: #ff6b9d;
  --rte-btn-active-bg: #ff6b9d;
  --rte-bg: #fff8fb;
  --rte-radius: 12px;
}

<RichTextEditor className="my-editor" />

Per-instance via inline style

<RichTextEditor
  style={{
    "--rte-accent": "#10b981",
    "--rte-btn-active-bg": "#10b981",
  } as React.CSSProperties}
/>

Token reference

All variables read from :root, [data-rte-theme], or any ancestor selector.