Styling

Customize the appearance of DHTMLX RichText by overriding CSS variables on the editor's container and sub-elements.

This guide shows how to apply a dark theme and target the menubar, toolbar, popup, and content area with CSS class selectors.

Default structure and class names

RichText uses the following core classes to structure the UI:

Class name	Description
.wx-richtext	Root container of the RichText widget
.wx-richtext-menubar	Container for menubar
.wx-richtext-menu	Container for the menubar dropdown menu
.wx-richtext-toolbar	Container for toolbar
.wx-editor-area	Container for main editable content area

Use these classes in custom CSS selectors to override the editor's appearance.

Override default styles

To override the default styles, redefine CSS variables on the #root container or on specific sub-elements:

<div id="root" style="width: 100%; height: 100%;"></div>

<style>
  #root,
  .wx-richtext-menu {
    --wx-background: #404151;
    --wx-background-alt: #212329;
    --wx-color-primary: #14B195;
    --wx-color-font: #FFFFFF;
    --wx-border: 1px solid #6B6C79;
    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
    --wx-button-active: rgba(20, 177, 149, 0.22);
    --wx-icon-color: var(--wx-color-font);
    --wx-color-font-alt: #9FA1AE;
    --wx-color-font-disabled: #9FA1AE;
    --wx-popup-border: var(--wx-border);

    color-scheme: dark;
  }

  .wx-richtext-menu {
    border: var(--wx-border);
  }
</style>

note

These styles apply a dark background, adjust button and icon colors, and improve visibility for dark UI themes.

Supported CSS variables

Variable name	Description
--wx-background	Background color of editor and popup
--wx-background-alt	Alternate background for menubar
--wx-color-primary	Accent color for links, blockquotes, and image resize handles
--wx-color-font	Main font color (for editor, menubar, and toolbar)
--wx-color-font-alt	Alternate font color
--wx-color-font-disabled	Disabled text color (for menubar and toolbar elements)
--wx-border	Border style used across the editor
--wx-color-secondary-hover	Hover state background for buttons within menubar and toolbar
--wx-button-active	Active state background for buttons within menubar and toolbar
--wx-icon-color	Color of the toolbar dropdown arrow icons
--wx-popup-border	Border for popup elements

Best practices

• Use color-scheme: dark to improve native input styling in dark mode
• Avoid changing layout-related properties (like display, position) without a strong reason

tip

For per-tag typography (font family, font size, color, background on h1, p, blockquote, and other block tags), use the defaultStyles configuration property with matching CSS rules. See the Configuration guide for the full pattern.

Live demo

The example below applies a custom style to RichText:

Related articles: Configuration