Redactor v3 Themes

The Redactor editor can be themed with CSS. Most themes only affect the editor and toolbar, but custom themes can also change the content styling.

On this page, we list the available built-in themes.

Standard Themes

default

The default theme is almost the standard theme from imperavi with only some minor changes, like adding a background that matches MODX input fields.

Default Redactor theme

redactor2

The redactor2 theme mimics the styling from Redactor 2.x. It's not an exact match, but is a lot closer and can help if you're having trouble adjusting to the new design.

Redactor 2 inspired theme for Redactor 3

dark

The dark theme inverses the color while using a blue for headers and links.

Dark theme for Redactor 3

pride

Looking to spread some love is love? The pride theme splashes a rainbows on your toolbar. (Unicorns are still awaiting delivery.)

Pride theme for Redactor 3

rebeccapurple

A very special shade of purple indeed, rebeccapurple exists in memory of Eric Meyer's daughter.

rebeccaapurple theme for Redactor 3

Dark Mode

Aside from the Dark theme, shown before, you can also use a dynamic dark mode. This functions as a toggle button in the toolbar, and switches to a dark version of the chosen theme.

To use it, add toggledark to your Toolbar Buttons in the configurator. Then find the toggle button in the toolbar.

The dark mode works best with the default, redactor2, and pride themes. Shown below is the toggling in action with the redactor2 theme.

When toggling the default theme, that switches to the dark theme. The redactor2 and pride themes have different dark toolbar styles.

Toggling the dark theme does not have any effect.

Custom themes

Learn more about custom themes.