Theme

theme#

Type: 'auto' | 'light' | 'dark'

Default: 'auto'

Sets the editor color scheme. Use 'auto' to follow the system preference, or force 'light' / 'dark'. The resolved value is applied as rx-data-theme on the editor container and the iframe document root.

const app = Redactor('#entry', {
  theme: 'dark'
});

// runtime
app.theme.set('light');

themeStore#

Type: boolean

Default: true

Saves the selected color mode (auto, light, or dark) in localStorage and restores it on the next visit. When disabled, the editor always starts from the theme option.

const app = Redactor('#entry', {
  theme: 'dark',
  themeStore: false
});

themeAttr#

Type: false | string

Default: false

Adds an extra attribute on the editor document root (<html>) with the resolved color mode. Useful when your site styles depend on a custom attribute (for example data-theme). Set to the attribute name you want to use.

const app = Redactor('#entry', {
  theme: 'dark',
  themeAttr: 'data-theme'
});