Dark mode

The editor ships a native dark mode. One prop, colorMode, themes the whole UI and renders the document the way Word's dark view does.

Enabling dark mode

colorMode is a controlled prop. There is no internal toggle button; you set the value and the editor follows it.

<DocxEditor document={bytes} colorMode="dark" />

Toggling from your own UI

Wire colorMode to your own control: a switch, a settings menu, a segmented button. The editor re-themes instantly when the value changes.

const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');

<button onClick={() => setColorMode((m) => (m === 'dark' ? 'light' : 'dark'))}>
  Toggle theme
</button>
<DocxEditor document={bytes} colorMode={colorMode} />

To follow the operating system instead, pass colorMode="system".

What dark mode changes

Dark mode has two layers:

• Editor chrome (toolbar, title bar, dialogs, dropdowns, sidebar, menus) re-themes through the shared design tokens, so every surface tracks the theme.
• The document canvas is rendered like Word's dark view: the page turns dark and text turns light. Rather than swapping two fixed colors, the canvas applies a perceptual transform that inverts each authored color's lightness while preserving its hue: black body text becomes near-white, a dark-navy heading becomes light blue, a dark red stays red. Nothing on the page becomes unreadable.

It is a display transform only. Dark mode never changes the document itself:

• Authored document colors are preserved; the display transform is never written into the DOCX.
• Printing always uses a white page with black text, regardless of colorMode.
• Embedded images, logos, and screenshots are not inverted; they render as authored.

The light theme is unchanged when colorMode is 'light'.

Reporting issues

Dark mode covers a large surface, and the canvas transform is heuristic. If you find a control that doesn't theme correctly, text that's hard to read, or a color that transforms badly, please open an issue at github.com/eigenpal/docx-editor/issues. Mention colorMode and include a screenshot.

Next steps

• Props: the colorMode prop
• Custom styles: theming the chrome around the canvas
• Composition: build chrome that themes with your app