@domternal/theme

Default styles for the Domternal editor, toolbar, menus, pickers, and document content. Includes light and dark themes, CSS custom properties for customization, and print styles. This package contains CSS and Sass source, with no JavaScript runtime.

Install

pnpm add @domternal/theme

The package declares Node.js 22 or later for tooling and has no peer dependencies. Use version 1.8.1 for the theme, editor and framework wrapper so component markup and styles stay aligned.

Usage

Import once in your application's entry point:

import '@domternal/theme';

For a Sass pipeline, use the source entry point instead:

@use '@domternal/theme/scss';

React, Vue, and Angular components add the editor's .dm-editor class. With @domternal/core or @domternal/vanilla, add that class to the host yourself.

Light and dark mode

Light is the default. Add a theme class to a common ancestor of the editor and its UI so sibling toolbars and menus receive the same palette:

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

Use dm-theme-auto to follow the system preference, or dm-theme-light to force a light palette. Toggle the class at runtime without recreating the editor. For a borderless document layout, create the editor with preset: 'notion'; see Notion mode.

Customize the theme

Load overrides after the theme. Defaults live on the component elements, so target .dm-editor and .dm-toolbar rather than setting variables only on an ancestor:

.my-app .dm-editor,
.my-app .dm-toolbar {
  --dm-accent: #e11d48;
  --dm-accent-hover: #be123c;
  --dm-accent-surface: rgba(225, 29, 72, 0.1);
}

.my-app .dm-editor {
  --dm-editor-bg: #fefce8;
  --dm-editor-border-radius: 0.5rem;
}

The theming guide covers custom palettes, separately mounted UI, scrolling, Sass, and the complete CSS property reference.

Rendering and print behavior

• Print styles hide editor controls and use a light palette, including when the screen theme is dark. To isolate the editor from your application's surrounding UI, use the Print extension. Color overrides for print need !important in a later @media print rule; see printing.
• Core, Table and theme 1.6.0 support eligible multirow print headers through the Print extension and standard Table node view. The print-only header group leaves document JSON and selection unchanged; browser pagination still applies. Core's optional resource preparation can wait for live images and fonts before command-driven printing. See optional print preparation.
• Highlights and shaded table cells retain authored backgrounds. In the live editor, text without an authored color adapts to that background. This behavior is not serialized into getHTML(); use a read-only editor to display saved content with the same contrast handling. See text on kept backgrounds for custom themes, browser fallbacks, and experimental tone helpers.
• Core and theme 1.5.0 also preserve literal full-width paragraph and heading fills through BlockColor, including empty blocks. Default text uses a readable tone on known backgrounds; explicit text colors follow the selected contrast policy. See block backgrounds.
• Pending image files show a localized loading status with reduced-motion support. The indicator is view-only and hidden in print. Custom themes should style .domternal-image-uploading and its __spinner and __label children.
• Core and theme 1.4.0 add TextColor.configure({ contrast: 'auto' }) for literal text colors. It is off by default; enable it in the Core extension. The live editor adjusts an opaque literal color only when its measured contrast is below 4.5:1 on a known solid background. The original color remains in stored content, HTML, clipboard output, export and print. Tokens, translucent text and uncertain paint are unchanged. See the Core README for the supported paint, custom mark views and stylesheet requirements.
• Core 1.8.0 exposes TextColorStorage.preview(root, marks) for literal-color adjustment in isolated DOM previews using the same theme stylesheet. See read-only previews for the required markup and preview lifecycle.
• The native hidden attribute hides themed elements; hidden="until-found" keeps its browser behavior.
• The stylesheet includes PasteCleanup feedback and floating-menu descriptions. Load the corresponding extensions or components to enable those features.

Entry points