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
});