Theming

The @domternal/theme package provides ready-made light and dark themes for the editor, toolbar, bubble menu, and all UI components. Every visual property is a CSS custom property, so you can customize anything by overriding a single variable.

Installation

pnpm add @domternal/theme

Setup

Import the theme in your application entry point:

// JavaScript/TypeScript bundler (Vite, Webpack, esbuild)
import '@domternal/theme';

// SCSS
@use '@domternal/theme';

<!-- HTML link tag -->
<link rel="stylesheet" href="node_modules/@domternal/theme/dist/domternal-theme.css" />

The package exports multiple entry points:

Import	Path	Description
`@domternal/theme`	`dist/domternal-theme.css`	Default: compiled CSS
`@domternal/theme/css`	`dist/domternal-theme.css`	Explicit CSS import
`@domternal/theme/scss`	`src/index.scss`	SCSS source (for Sass pipelines)

Light and dark mode

Light mode is the default. Dark mode is activated by adding a CSS class to the editor or any ancestor element.

Three modes

Class	Behavior
(none)	Light theme (default)
`dm-theme-dark`	Dark theme, always
`dm-theme-light`	Light theme, always (use to force light inside a dark context)
`dm-theme-auto`	Follows the user’s system preference via `prefers-color-scheme`

Usage

<!-- Always dark -->
<div class="dm-theme-dark">
  <div class="dm-toolbar">...</div>
  <div class="dm-editor">...</div>
</div>

<!-- Follows system preference -->
<div class="dm-theme-auto">
  <div class="dm-toolbar">...</div>
  <div class="dm-editor">...</div>
</div>

<!-- Force light inside a dark page -->
<div class="dm-theme-light">
  <div class="dm-toolbar">...</div>
  <div class="dm-editor">...</div>
</div>

Toggle dark mode at runtime

function toggleTheme() {
  document.body.classList.toggle('dm-theme-dark');
}

Or use dm-theme-auto and let the OS handle it.

Customization

Override any CSS custom property on .dm-editor, .dm-toolbar, or any parent element:

/* Custom accent color */
.my-editor {
  --dm-accent: #e11d48;
  --dm-accent-hover: #be123c;
  --dm-accent-surface: rgba(225, 29, 72, 0.1);
}

/* Custom editor appearance */
.my-editor .dm-editor {
  --dm-editor-bg: #fefce8;
  --dm-editor-border-radius: 0;
  --dm-editor-shadow: none;
}

/* Custom toolbar */
.my-editor .dm-toolbar {
  --dm-toolbar-bg: #fef9c3;
  --dm-button-size: 2.25rem;
}

Since CSS custom properties cascade, you can set them on any ancestor and they flow down to all editor components.

CSS custom properties reference

All properties are defined on .dm-editor unless noted otherwise. Light values are the defaults. Dark values are applied when dm-theme-dark or dm-theme-auto (in dark mode) is active.

Semantic base tokens

These are the core design tokens that other properties reference via var().

Property	Light	Dark	Description
`--dm-bg`	`#ffffff`	`#1e1e1e`	Base background
`--dm-text`	`#1a1a1a`	`#e0e0e0`	Base text color
`--dm-muted`	`#999999`	`#777777`	Secondary/muted text
`--dm-surface`	`#f8f9fa`	`#2a2a2a`	Elevated surface background
`--dm-border-color`	`#e5e7eb`	`#3a3a3a`	Border color
`--dm-hover`	`rgba(0,0,0,0.04)`	`rgba(255,255,255,0.08)`	Hover state background
`--dm-active`	`rgba(0,0,0,0.1)`	`rgba(255,255,255,0.15)`	Active state background
`--dm-accent`	`#2563eb`	`#60a5fa`	Primary accent (blue)
`--dm-accent-hover`	`#1d4ed8`	`#93c5fd`	Accent on hover
`--dm-accent-surface`	`rgba(37,99,235,0.1)`	`rgba(96,165,250,0.15)`	Accent tint background
`--dm-focus-color`	`rgba(66,133,244,0.3)`	`rgba(96,165,250,0.3)`	Focus ring color
`--dm-selection`	`rgba(66,133,244,0.2)`	`rgba(96,165,250,0.25)`	Text selection color
`--dm-code-surface`	`#f0f0f0`	`#2d2d2d`	Code background surface
`--dm-code-color`	`inherit`	`inherit`	Code text color

Editor

Property	Default	Description
`--dm-editor-bg`	`var(--dm-bg)`	Editor background
`--dm-editor-text`	`var(--dm-text)`	Editor text color
`--dm-editor-font-family`	System font stack	Font family
`--dm-editor-font-size`	`1rem`	Base font size
`--dm-editor-line-height`	`1.6`	Line height
`--dm-editor-padding`	`1rem`	Content padding
`--dm-editor-border`	`1px solid var(--dm-border-color)`	Border
`--dm-editor-border-radius`	`0.75rem`	Corner radius
`--dm-editor-focus-ring`	`none`	Focus ring (override for custom, e.g., `0 0 0 2px var(--dm-focus-color)`)
`--dm-editor-shadow`	`0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)`	Box shadow

Placeholder

Property	Default	Description
`--dm-placeholder-color`	`var(--dm-muted)`	Placeholder text color

Links

Property	Default	Description
`--dm-link-color`	`var(--dm-accent)`	Link color
`--dm-link-hover-color`	`var(--dm-accent-hover)`	Link hover color

Inline code

Property	Default	Description
`--dm-code-bg`	`var(--dm-code-surface)`	Inline code background
`--dm-code-text`	`var(--dm-code-color)`	Inline code text color
`--dm-code-font`	`"SF Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace`	Monospace font
`--dm-code-border-radius`	`0.25rem`	Inline code corner radius

Code blocks

Property	Default	Description
`--dm-code-block-bg`	`var(--dm-code-surface)`	Code block background
`--dm-code-block-text`	`var(--dm-text)`	Code block text color

Syntax highlighting

Used by Code Block Lowlight for highlight.js token colors.

Property	Light	Dark	Description
`--dm-syntax-keyword`	`#c72031`	`#ff7b72`	Keywords, types
`--dm-syntax-entity`	`#6f42c1`	`#d2a8ff`	Functions, class names
`--dm-syntax-constant`	`#005cc5`	`#79c0ff`	Constants, numbers
`--dm-syntax-string`	`#032f62`	`#a5d6ff`	Strings, regex
`--dm-syntax-variable`	`#d35400`	`#ffa657`	Variables, built-ins
`--dm-syntax-comment`	`#57606a`	`#8b949e`	Comments
`--dm-syntax-tag`	`#22863a`	`#7ee787`	HTML/XML tags
`--dm-syntax-addition`	`#22863a`	`#aff5b4`	Diff additions
`--dm-syntax-addition-bg`	`#f0fff4`	`#033a16`	Diff addition background
`--dm-syntax-deletion`	`#b31d28`	`#ffdcd7`	Diff deletions
`--dm-syntax-deletion-bg`	`#ffeef0`	`#67060c`	Diff deletion background

Blockquote

Property	Light	Dark	Description
`--dm-blockquote-border`	`3px solid #6a6a6a`	`3px solid #555555`	Left border
`--dm-blockquote-color`	`#6a6a6a`	`#a0a0a0`	Text color

Horizontal rule

Property	Default	Description
`--dm-hr-color`	`var(--dm-border-color)`	Rule color

Table

Property	Default	Description
`--dm-table-border`	`1px solid var(--dm-border-color)`	Cell border
`--dm-table-header-bg`	`var(--dm-surface)`	Header cell background
`--dm-table-selected-bg`	`rgba(66, 133, 244, 0.15)`	Selected cell background

Highlight

Property	Light	Dark	Description
`--dm-highlight-bg`	`#fff3cd`	`rgba(255, 243, 205, 0.2)`	Default highlight background (used by `==text==` input rule)

Mention

Property	Default	Description
`--dm-mention-bg`	`var(--dm-accent-surface)`	Mention background
`--dm-mention-color`	`var(--dm-accent)`	Mention text color
`--dm-mention-border-radius`	`0.25rem`	Mention corner radius

Details / accordion

Property	Default	Description
`--dm-details-border`	`1px solid var(--dm-border-color)`	Details border
`--dm-details-bg`	`var(--dm-surface)`	Summary background
`--dm-details-summary-font-weight`	`600`	Summary text weight

Defined on .dm-toolbar:

Property	Default	Description
`--dm-toolbar-bg`	`var(--dm-bg, #ffffff)`	Toolbar background
`--dm-toolbar-border`	`none`	Toolbar border
`--dm-toolbar-padding`	`0.375rem 0.5rem`	Toolbar padding
`--dm-toolbar-gap`	`0.125rem`	Gap between items
`--dm-toolbar-border-radius`	`0.75rem 0.75rem 0 0`	Toolbar corner radius

Defined on .dm-toolbar:

Property	Default	Description
`--dm-button-size`	`2rem`	Button width and height
`--dm-button-border-radius`	`0.375rem`	Button corner radius
`--dm-button-color`	`var(--dm-text, #374151)`	Button icon/text color
`--dm-button-hover-bg`	`var(--dm-hover)`	Button hover background
`--dm-button-active-bg`	`var(--dm-accent-surface)`	Active button background
`--dm-button-active-color`	`var(--dm-accent)`	Active button icon color
`--dm-button-disabled-opacity`	`0.35`	Disabled button opacity

Defined on .dm-toolbar:

Property	Default	Description
`--dm-separator-color`	`var(--dm-border-color)`	Separator color
`--dm-separator-margin`	`0.375rem`	Separator vertical margin

CSS classes

The theme styles these CSS classes. Use them when building custom UI or vanilla JS editors.

Core

Class	Description
`.dm-editor`	Main editor wrapper. Defines all design tokens. Must have `position: relative` (set by theme).
`.dm-editor .ProseMirror`	The contenteditable area. Inherits editor tokens.
`.dm-toolbar`	Toolbar container. Flex layout with grouped buttons.
`.dm-toolbar-group`	Group of related toolbar buttons.
`.dm-toolbar-button`	Individual toolbar button.
`.dm-toolbar-separator`	Vertical separator between button groups.
`.dm-toolbar-dropdown-panel`	Dropdown panel (headings, font family, colors).
`.dm-toolbar-dropdown-item`	Item inside a dropdown panel.

Floating UI

Class	Description
`.dm-bubble-menu`	Inline formatting toolbar (appears on text selection). Compact button sizing.
`.dm-floating-menu`	Block-level menu (appears on empty lines).
`.dm-link-popover`	URL input popover for links.
`.dm-image-popover`	URL input popover for images.

Content elements

Class	Description
`.mention`	Inline mention node.
`.dm-mention-suggestion`	Mention autocomplete dropdown.
`.dm-emoji-picker`	Emoji picker panel.
`.dm-emoji-suggestion`	Emoji autocomplete dropdown.
`.dm-color-palette`	Color grid for text color and highlight pickers.
`.dm-image-resizable`	Resizable image wrapper with handles.
`.invisible-char`	Invisible character indicator (paragraph marks, spaces).

Table controls

Class	Description
`.dm-table-container`	Wrapper for table handles and content.
`.dm-table-col-handle`	Column selection handle.
`.dm-table-row-handle`	Row selection handle.
`.dm-table-cell-handle`	Cell corner handle (opens cell toolbar).
`.dm-table-cell-toolbar`	Floating toolbar above selected cells.
`.dm-table-controls-dropdown`	Dropdown for table operations.

State classes

Class	Description
`.ProseMirror-selectednode`	Outline on selected atom nodes (images, horizontal rules). Uses `--dm-accent`.
`.ProseMirror-gapcursor`	Animated blinking cursor in gap positions.
`.selectedCell`	Background overlay on selected table cells. Uses `--dm-table-selected-bg`.
`.is-empty`	Added to empty nodes for placeholder display.
`.is-editor-empty`	Added to the editor when the document is empty.
`.has-focus`	Added by the Focus extension to the focused node.
`.is-open`	Added to open details/accordion elements.

Building a custom theme

You don’t need @domternal/theme to use Domternal. The editor works without any styles. You can build everything from scratch.

Minimum required styles

At minimum, ProseMirror requires these styles to function correctly:

/* ProseMirror content area */
.dm-editor .ProseMirror {
  position: relative;
  outline: none;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
}

/* Gapcursor (if using Gapcursor extension) */
.dm-editor .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.dm-editor .ProseMirror-gapcursor::after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid currentColor;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
  to { visibility: hidden; }
}
.dm-editor .ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

/* Hide selection on drag */
.ProseMirror-hideselection *::selection {
  background: transparent;
}

/* Table column resize handle (if using tables) */
.dm-editor .column-resize-handle {
  position: absolute;
  right: -1.5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #2563eb;
  pointer-events: none;
}

Approach: override the default theme

The fastest way to customize is to import the default theme and override specific variables:

@import '@domternal/theme';

.my-app .dm-editor {
  --dm-accent: #e11d48;
  --dm-editor-border-radius: 0;
  --dm-editor-font-family: 'Inter', sans-serif;
}

.my-app .dm-toolbar {
  --dm-toolbar-bg: #f1f5f9;
  --dm-toolbar-border-radius: 0;
}

Approach: build from SCSS source

Import the SCSS source and use the theme’s structure:

// Import just the variables and base styles you need
@use '@domternal/theme/scss';

Dark mode for custom themes

If building a custom dark theme, override the same semantic tokens:

.my-dark-theme .dm-editor {
  --dm-bg: #0d1117;
  --dm-text: #c9d1d9;
  --dm-surface: #161b22;
  --dm-border-color: #30363d;
  --dm-accent: #58a6ff;
  --dm-accent-hover: #79c0ff;
  --dm-accent-surface: rgba(88, 166, 255, 0.15);
  --dm-hover: rgba(255, 255, 255, 0.06);
  --dm-active: rgba(255, 255, 255, 0.12);
  --dm-code-surface: #161b22;
}

/* Apply the same tokens to floating UI that escapes the editor */
.my-dark-theme .dm-toolbar,
.my-dark-theme .dm-bubble-menu,
.my-dark-theme .dm-emoji-picker,
.my-dark-theme .dm-mention-suggestion,
.my-dark-theme .dm-table-controls-dropdown {
  --dm-bg: #0d1117;
  --dm-text: #c9d1d9;
  --dm-surface: #161b22;
  --dm-border-color: #30363d;
  --dm-accent: #58a6ff;
  --dm-hover: rgba(255, 255, 255, 0.06);
}

Source files

The theme is composed of SCSS partials:

File	Description
`_variables.scss`	All CSS custom property definitions
`_base.scss`	`.dm-editor` wrapper styles, fade-in animation
`_content.scss`	Content typography (headings, lists, links, code, images)
`_prosemirror.scss`	ProseMirror required styles (gapcursor, selected nodes, tables)
`_toolbar.scss`	Toolbar, buttons, dropdowns, separators
`_bubble-menu.scss`	Compact bubble menu
`_floating-menu.scss`	Floating menu
`_link-popover.scss`	Link URL input popover
`_color-palette.scss`	Color grid for text color and highlight pickers
`_mention.scss`	Mention nodes and suggestion dropdown
`_image.scss`	Resizable images, handles, image popover
`_details.scss`	Accordion/details with CSS grid toggle
`_placeholder.scss`	Placeholder text
`_task-list.scss`	Task list with checkboxes
`_invisible-chars.scss`	Invisible character indicators
`_syntax.scss`	Syntax highlighting for code blocks
`_emoji-picker.scss`	Emoji picker and suggestions
`_table-controls.scss`	Table handles, cell toolbar, dropdowns
`themes/_light.scss`	Light theme class and mixin
`themes/_dark.scss`	Dark theme class, auto mode, and mixin

Theming

Installation

Setup

Light and dark mode

Three modes

Usage

Toggle dark mode at runtime

Customization

CSS custom properties reference

Semantic base tokens

Editor

Placeholder

Links

Inline code

Code blocks

Syntax highlighting

Blockquote

Horizontal rule

Table

Highlight

Mention

Details / accordion

Toolbar

Toolbar buttons

Toolbar separator

CSS classes

Core

Floating UI

Content elements

Table controls

State classes

Building a custom theme

Minimum required styles

Approach: override the default theme

Approach: build from SCSS source

Dark mode for custom themes

Source files