Styling the Editor

CSS tokens

All visual values in the editor are CSS custom properties scoped to .inkstream-editor-wrapper. Override them in your own stylesheet — no need to patch or fork the package.


.my-app .inkstream-editor-wrapper {
  /* Brand accent (buttons, focus rings, active states) */
  --ink-accent:        #7c3aed;
 
  /* Backgrounds */
  --ink-bg:            #fafaf9;     /* editor canvas */
  --ink-surface:       #f5f3ff;     /* toolbar background */
 
  /* Borders */
  --ink-border:        #ddd6fe;
  --ink-border-accent: #a78bfa;
 
  /* Typography */
  --ink-text:          #1e1b4b;
  --ink-text-muted:    #6d28d9;
 
  /* Shape */
  --ink-radius-sm:     4px;
  --ink-radius-md:     8px;
}

For the full list of available tokens (including dark-mode defaults), see the Theming & Dark Mode guide.

Dark mode

The editor handles dark mode automatically. Override tokens for each scheme separately if you want custom colours in both:


/* Custom light overrides */
.my-app .inkstream-editor-wrapper {
  --ink-accent: #7c3aed;
}
 
/* Custom dark overrides (auto via OS, or .inkstream-dark class) */
@media (prefers-color-scheme: dark) {
  .my-app .inkstream-editor-wrapper:not(.inkstream-light) {
    --ink-accent: #a78bfa;
    --ink-bg:     #1a1625;
  }
}
 
/* Or target the forced-dark class directly */
.my-app .inkstream-editor-wrapper.inkstream-dark {
  --ink-accent: #a78bfa;
  --ink-bg:     #1a1625;
}

Use the theme prop (or showThemeToggle) to control which scheme is active — never apply inkstream-dark / inkstream-light to an outer wrapper div. See the Theming guide for full details.

Scoping to a specific editor instance

Wrap the editor in a container with a custom class and target it:


<div className="my-editor">
  <RichTextEditor plugins={plugins} initialContent="<p>…</p>" />
</div>


.my-editor .inkstream-editor-wrapper {
  --ink-radius-md: 0;     /* flush / square corners for embedded use */
  border: none;           /* remove the package border */
}
 
.my-editor .ProseMirror {
  min-height: 500px;
  padding: 2rem;
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 1.8;
}

Content typography

Target .ProseMirror for the editable area — this is the ProseMirror DOM node:


/* Headings */
.my-editor .ProseMirror h1 { font-size: 2rem;   font-weight: 700; }
.my-editor .ProseMirror h2 { font-size: 1.5rem; font-weight: 600; }
.my-editor .ProseMirror h3 { font-size: 1.2rem; font-weight: 600; }
 
/* Blockquote */
.my-editor .ProseMirror blockquote {
  border-left: 4px solid var(--ink-accent);
  padding-left: 1rem;
  color: var(--ink-text-muted);
}
 
/* Inline code */
.my-editor .ProseMirror code {
  background: var(--ink-surface-hover);
  border-radius: var(--ink-radius-sm);
  padding: 1px 5px;
  font-size: 0.875em;
}

Tailwind v4 preflight

If your app uses Tailwind v4, its CSS preflight resets <a>, heading, list, <strong>, and <em> styles. You’ll need to restore these inside the editor:


.my-editor .ProseMirror h1,
.my-editor .ProseMirror h2,
.my-editor .ProseMirror h3 { font-weight: 700; margin: 0.75em 0 0.4em; }
 
.my-editor .ProseMirror ul   { list-style: disc;    padding-left: 1.5rem; }
.my-editor .ProseMirror ol   { list-style: decimal; padding-left: 1.5rem; }
.my-editor .ProseMirror strong { font-weight: 600; }
.my-editor .ProseMirror em     { font-style: italic; }