@richhtmleditor/themes

Shared CSS for Rich HTML Editor — toolbar, content area, outline panel, selection mini-toolbar, tables, and dark mode tokens. Pair with @richhtmleditor/core or any framework wrapper.

Current release: 1.1.1

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.vercel.app — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.1.1

• richhtmleditor.css — complete editor chrome (toolbar rows, buttons, dropdowns, content area)
• Dark mode — .de-root--dark class toggled when dark: true is passed to createEditor
• CSS variables — --de-primary, --de-toolbar-bg, --de-content-bg, --de-border, and more for theming
• Component styles — outline panel, TOC nav, selection mini-toolbar, tables, collapsible sections, workflow bar slots
• New in 1.1.0 — slash command menu, block drag handles, drop indicator, paste special modal, track changes panel styles

Side-effect CSS package — import once globally or in your bundler entry. No JavaScript runtime.

Keywords: richhtmleditor css theme dark-mode wysiwyg

Install

npm install @richhtmleditor/themes
# Typically installed alongside @richhtmleditor/core or a framework wrapper.

Usage — bundler import

import "@richhtmleditor/themes/richhtmleditor.css";

Usage — Angular angular.json

"styles": ["node_modules/@richhtmleditor/themes/richhtmleditor.css"]

Usage — dark mode

createEditor({
  element: el,
  dark: true,
  theme: {
    primary: "#7c3aed",
    toolbarBg: "#1e293b",
    contentBg: "#0f172a"
  }
});

The editor root receives de-root--dark and your theme tokens map to CSS variables on #richhtmleditor-root.de-root.

API

| Export | Description | | --- | --- | | @richhtmleditor/themes | Alias for richhtmleditor.css. | | @richhtmleditor/themes/richhtmleditor.css | Main stylesheet path. |

Key CSS variables

| Variable | Default (light) | Used for | | --- | --- | --- | | --de-primary | #2563eb | Buttons, links, accents | | --de-toolbar-bg | #ffffff | Toolbar background | | --de-content-bg | #ffffff | Editable content area | | --de-text-primary | #0f172a | Body text | | --de-border | #e2e8f0 | Dividers and borders |

Related packages

• @richhtmleditor/core — editor engine (auto-required by wrappers).
• @richhtmleditor/angular — Angular component.
• @richhtmleditor/react — React component.
• @richhtmleditor/vue — Vue 3 component.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT