Theming

Color scheme#

The theme prop takes "light", "dark", or "system" (the default, which follows prefers-color-scheme). The editor ignores your page's .dark class, so pass your app's theme explicitly when it has a toggle:

<BlockEditor theme={isDark ? "dark" : "light"} />

Brand colors and fonts#

Every color comes from a CSS variable. Set them on a class you pass as className, or on .genesis-editor to change every editor. Add a [data-color-scheme="dark"] rule for dark-mode values.

Layout and gutter#

The editor pads its content with its own gutter, so the + and drag handle that appear on hover always sit inside the editor, in any container, without padding from your page. Change the width with --genesis-gutter, and the right side separately with --genesis-gutter-end:

.compact-editor {
  /* Keep it at least 3.25rem so the + and drag handle fit inside. */
  --genesis-gutter: 3.25rem;
  --genesis-gutter-end: 1rem;
}

Below 640px wide, the editor shows a block toolbar at the bottom of the screen instead of the hover menu, and the gutter shrinks to 1.25rem. Set mobileToolbar={false} to keep the hover menu and the full gutter.

Variables#

BlockNote's own --bn-colors-* variables (editor text, background, highlights) also apply. The stylesheet is scoped to .genesis-editor and uses no cascade layers, so your page's styles don't leak in and the editor's don't leak out.