Theming

Theming in React Editor is currently limited in functionality.

CSS properties for theming the default React Editor user interface.

Properties

ParamExample
--editor-font-familyArial
--editor-font-family-monospacedMenlo

--editor-font-family

The font family used for the React Editor interface. Must be used with the no-external bundle that stops React Editor from loading the default font.

/* Load bundle without existing font */
@import "@reacteditor/core/no-external.css";
 
:root {
  --editor-font-family: Arial;
}

--editor-font-family-monospaced

The font family used for monospaced elements of the React Editor interface.

/* Monospaced fonts don't use external files, so the default bundle is safe */
@import "@reacteditor/core/react-editor.css";
 
:root {
  --editor-font-family-monospaced: Menlo;
}