> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumen.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Light and Dark Themes in Lumen Editor: Customization

> Lumen Editor ships with built-in light and dark themes. Switch at runtime with setTheme(), or target CSS class names to apply your own brand styles.

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'`:

```js theme={null}
const editor = new Editor('#editor', {
  theme: 'light'   // or 'dark'
});
```

If you omit the `theme` option, the editor defaults to `'light'`.

<Note>
  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.
</Note>

## 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:

```js theme={null}
// 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:

| Theme   | Class applied         |
| ------- | --------------------- |
| `light` | `lumen-editor--light` |
| `dark`  | `lumen-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:

```css theme={null}
/* 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.