Theming

The editor's CSS variables, how to override them on an ancestor, the dark mode values, and how to widen or narrow the editing column.

Width

--editor-max-width sets the width of the editing column. The default is 700px, and the column reads it as var(--editor-max-width,700px). It applies to the editable in memory mode, to the column in persisted mode, and to the loading skeleton and the recovery notice.

Set it on an ancestor of the editor. To make it fill the space instead, use a percentage.

tsx

"use client";

import type { CSSProperties } from "react";

import { NotionLikeEditorBlock } from "@/components/blocks/notion-like-editor";

// Set the editor's own custom properties on an ancestor. They are inherited.
const THEME = {
  "--editor-max-width": "900px",
  "--editor-text-blue": "oklch(0.5 0.13 255)",
  "--editor-callout-info-bg": "oklch(0.96 0.03 255)",
} as CSSProperties;

export function WideEditor() {
  return (
    <div style={THEME}>
      <NotionLikeEditorBlock documentId="notes" />
    </div>
  );
}

The static renderer has no width of its own. Give the element around it the same width, as the usage page shows, or the read-only output will be wider than the editor was.

The colour variables

The registry writes these into the stylesheet components.json points at, once for light and once for dark. They are inherited CSS custom properties, so a value set on an ancestor overrides the stylesheet for everything below it.

Text tones (9)

Nine palette tokens for the Text color mark.

--editor-text-blue, --editor-text-brown, --editor-text-gray, --editor-text-green, --editor-text-orange, --editor-text-pink, --editor-text-purple, --editor-text-red, --editor-text-yellow

Background tones (9)

Nine palette tokens for the Highlight mark and the block background.

--editor-bg-blue, --editor-bg-brown, --editor-bg-gray, --editor-bg-green, --editor-bg-orange, --editor-bg-pink, --editor-bg-purple, --editor-bg-red, --editor-bg-yellow

Callout tones (10)

A background and a border for each of the five callout tones.

--editor-callout-danger-bg, --editor-callout-danger-border, --editor-callout-default-bg, --editor-callout-default-border, --editor-callout-info-bg, --editor-callout-info-border, --editor-callout-success-bg, --editor-callout-success-border, --editor-callout-warning-bg, --editor-callout-warning-border

Code colours (12)

The highlight.js palette used by code blocks.

--editor-code-addition, --editor-code-attr, --editor-code-comment, --editor-code-deletion, --editor-code-keyword, --editor-code-meta, --editor-code-number, --editor-code-punctuation, --editor-code-string, --editor-code-title, --editor-code-type, --editor-code-variable

Fonts (3)

The sans, serif and mono stacks the editor renders in.

--editor-font-mono, --editor-font-sans, --editor-font-serif

Each name is also mapped to a Tailwind colour in the @theme block, so text-editor-text-blue and bg-editor-callout-info-bg work out of the box. The tone variables are the ones exposed that way; the code palette and the font stacks are read by the editor's own classes.

How to override

In the stylesheet, edit the values in the light and dark blocks the registry wrote. This changes every editor on the site.
On an element, set the variables with a style prop, as the example above does. This changes one editor and everything inside it.
For a per-document theme, put the variable values in a wrapper around the editor and switch them from your own state.

Keys are custom properties, so TypeScript needs a cast in a style object: as CSSProperties. The example shows it.

Dark mode

Every variable in the list above has a second value in the dark block, so nothing in the editor hard-codes a light colour. The switch is the same one your app already uses: the registry writes the dark values inside .dark, and the editor's styles use the dark: variant against that class.

Keep the dark values where they are. The editor's code blocks, callouts and media surfaces all assume a value exists in both blocks.
If you build your own palette, override both blocks. A light value with no dark counterpart is the one mistake this system cannot hide.

Anything else

The editor has no other theming surface. Mark sizes, list markers, spacing and the block handle are set in the installed source, and the components sit behind your own components/ui primitives, so a change to Tailwind tokens reaches them without touching the block.