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': 
const editor = new Editor('#editor', {
  theme: '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: 
// Switch to dark mode
editor.setTheme('dark');

// Switch back to light mode
editor.setTheme('light');
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:
ThemeClass applied
lightlumen-editor--light
darklumen-editor--dark
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: 
/* Override the light theme */
.lumen-editor--light {
  --lumen-bg: #ffffff;
  --lumen-text: #1a1a1a;
  --lumen-border: #e2e8f0;
  --lumen-toolbar-bg: #f8fafc;
}

/* Override the dark theme */
.lumen-editor--dark {
  --lumen-bg: #1e1e2e;
  --lumen-text: #cdd6f4;
  --lumen-border: #313244;
  --lumen-toolbar-bg: #181825;
}
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.