Skip to main content
Lumen Editor ships with two built-in visual themes — light and dark — that you can activate at initialization or switch at any point while the editor is running. Both themes are implemented entirely through CSS classes applied to the editor’s root element, which means you can layer your own styles on top without touching any JavaScript.

​
Setting the initial theme

Pass the theme key in the options object when you create the editor instance. The value must be either 'light' or 'dark':
If you omit the theme option, the editor defaults to 'light'.
Lumen Editor’s theme stylesheet must be imported in your project for the built-in themes to render correctly. Add import 'lumen-editor/dist/theme.css' (or the equivalent <link> tag) before you mount the editor.

​
Switching themes at runtime

You can change the active theme at any time — for example, in response to a user toggling a dark-mode preference — by calling setTheme() on the editor instance:
setTheme() updates the CSS class on the editor’s root element immediately. No re-initialization or content reload is required.

​
CSS customization

When a theme is active, Lumen Editor adds one of two classes to its root element: You can target these classes in your own stylesheet to override colors, fonts, spacing, or any other visual property. The recommended approach is to use CSS custom properties (variables) so that both themes stay in sync with your design system:
Because the classes are on the outermost wrapper, your rules will cascade naturally into the toolbar, the editing area, and any overlays (link popover, image dialog, etc.) without needing deep selectors.