Menu
Redactor
Documentation / How To

Change CSS styles

Override the styles #

The easiest way to customize the content style in the editor is to override the styles, like this: 


.rx-content p {
    font-size: 18px;
}

All content paragraphs within Redactor will now have a text size of 18px.

Dark theme #

Defining styles for a dark theme might look like this: 


// light theme
.rx-content p {
    color: #111;
}
// dark theme
[rx-data-theme=dark] p {
    color: #cdcdcd;
}

CSS Variables #

Content styles use CSS variables, here's a full list of their defaults: 


// =Font
--rx-font-text: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--rx-font-heading: inherit;
--rx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

// =Colors
--rx-body-color: var(--rx-bg-body);
--rx-heading-color: var(--rx-fg-heading);
--rx-text-color: var(--rx-fg-text);
--rx-table-border: var(--rx-border-dark-minimal);
--rx-line-color: var(--rx-border-dark-minimal);
--rx-pre-color: var(--rx-fg-text);
--rx-pre-bg: var(--rx-bg-dark-minimal);
--rx-var-color: var(--rx-fg-text);
--rx-kbd-color: var(--rx-fg-text);
--rx-kbd-border: var(--rx-border-dark-subtle);
--rx-kbd-bg: var(--rx-bg-light-accent);
--rx-code-color: var(--rx-fg-text);
--rx-code-bg: var(--rx-bg-dark-medium);
--rx-abbr-border: var(--rx-border-dark-emphasis);
--rx-quote-border-color: var(--rx-border-dark-medium);

You can set your own values, for example like this: 


.rx-content {
    --rx-text-color: #111;
}
// dark theme
[rx-data-theme=dark] .rx-content {
    --rx-text-color: #cdcdcd;
}

Style inheritance #

Redactor can inherit page styles for content. To do this, enable the 'nostyle' setting. 


let app = Redactor('#entry', {
    nostyle: true
});