@domternal/theme

@domternal/theme

Ready-made light and dark styles for the Domternal editor, toolbar, bubble menu, floating menu, popovers, and every UI component. It is a CSS-only package (no JavaScript), built from Sass and shipped as a single compiled stylesheet. Every visual property is exposed as a CSS custom property, so you can rebrand colors, fonts, spacing, and borders by overriding a variable instead of touching the source.

Links

Website    •    Documentation    •    Live examples

Install

pnpm add @domternal/theme

This package has no peer dependencies.

Usage

Import the stylesheet once in your application entry point:

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

// Sass pipeline (imports the SCSS source)
@use '@domternal/theme/scss';

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

Light mode is the default. Toggle dark mode by adding a class to the editor or any ancestor element:

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

<!-- Follow the system preference -->
<div class="dm-theme-auto">...</div>

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

For a Notion-style look (borderless surface, centered narrow column), add the dm-notion-mode class to the .dm-editor host element. See the theming guide for details.

Override any CSS custom property on .dm-editor, .dm-toolbar, or a parent to customize the look:

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

.my-editor .dm-editor {
  --dm-editor-bg: #fefce8;
}

Entry points