Skip to main content

DHTMLX RichText. Styling with custom CSS example

Live example​

RichText exposes CSS variables you can override to restyle it. This demo sets a dark theme by redefining a handful of --wx- variables on the editor and its menu. The background, accent color, text colors, and borders all follow from those values.

const widget = new richtext.Richtext("#richtext", {
    value,
    imageUploadUrl,
    menubar: true
});

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

<!-- custom styles -->

<style>
#richtext,
    .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>

<script>
const value = `
        <h2>Meet DHTMLX Rich Text Editor!</h2>
        <p>Create and edit text with ease! DHTMLX RichText is a powerful editor that allows you to:</p>
        <ul>
            <li>Format text: make it <b>bold</b>, <i>italic</i>, <u>underlined</u>, or <s>strikethrough</s>, choose fonts (e.g., Arial), <span style="font-size:16px;">text size</span>, <span style="color:#0066CC;">font color,</span> and <span style="color:#FFFFFF;background:#0066CC;">background color.</span></li>
            <li>Add headings of different levels (from H1 to H6) or use the Paragraph style, align text to the left, center, right, or justify, and create numbered or bulleted lists for structured content.</li>
            <li>Insert hyperlinks for navigation to external resources, add images for visual enhancement, insert horizontal lines for separation, and use subscripts (e.g., x₂) or superscripts (e.g., x²) for scientific or mathematical notation.</li>
            <li>Read and write editor content as HTML, plain text, or Markdown for flexible integration.</li>
            <li>Clear formatting from selected content with a single click.</li>
            <li>Customize the toolbar to suit your needs, adding or removing features as desired.</li>
            <li>Enjoy an adaptive design that works seamlessly on any device, including mobile.</li>
            <li>Use Undo and Redo functions to easily revert or reapply changes as needed.</li>
        </ul>
        <p><b>To learn more, read our <a href="https://docs.dhtmlx.com/richtext/">documentation</a> and check the <a href="https://snippet.dhtmlx.com/q8j4qqq9?tag=richtext">samples</a></b>.</p>
        <hr>
        <blockquote>It is very easy to get things up and running.</blockquote>
        <p><img src="https://docs.dhtmlx.com/richtext-backend/images/3490994099/i.png" style="width:415px;height:276px;"></p>
    `;

    const baseURL = "https://docs.dhtmlx.com/richtext-backend";
    const imageUploadUrl = `${baseURL}/images`;
</script>

Use case​

Use it when the editor should match your app's theme, like a dark dashboard or a branded product where the default look is too plain. You set the colors and borders once through CSS variables, and they flow across the editor area, menubar, and toolbar together. For finer control, the editor exposes stable class names you can target directly. To make it yours, override the --wx- variables on your container and set color-scheme to match.

How to do this in your app​

  • Override CSS variables: set --wx- variables on the editor container (and .wx-richtext-menu for the dropdown menu), for example --wx-background, --wx-color-primary, and --wx-color-font.
  • Set the color scheme: add color-scheme: dark so native inputs render correctly in a dark theme.
  • Target specific parts: use the built-in classes to style areas directly, like .wx-richtext-menubar, .wx-richtext-toolbar, and .wx-editor-area.
  • Reuse values: reference one variable from another, like --wx-icon-color: var(--wx-color-font).

Good to know​

  • Variables cascade across the widget: --wx-color-font covers the editor, menubar, and toolbar, so one value keeps them consistent.
  • --wx-color-primary is the accent: it drives links, blockquotes, and picture-resize borders.
  • Keep to color and border variables: the styling guide recommends against changing layout properties like display or position.
  • The menu is a separate element: apply your variables to .wx-richtext-menu too, as the demo does, so the dropdown menu matches.

API reference​

Additional resources​