Dark mode

Set colorMode to theme the chrome and document canvas 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 uses that value.

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

<DocxEditor :document="bytes" color-mode="dark" />

Toggling from your own UI

Wire colorMode to your own control: a switch, a settings menu, a segmented button. The editor applies the new theme 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} />

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@docx-editor.dev/vue';

const colorMode = ref<'light' | 'dark'>('light');
</script>

<template>
  <button type="button" @click="colorMode = colorMode === 'dark' ? 'light' : 'dark'">
    Toggle theme
  </button>
  <DocxEditor :document="bytes" :color-mode="colorMode" />
</template>

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. Authored colors keep contrast under the lightness transform.

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 chrome and the document canvas, and the canvas transform is heuristic. If a control does not use the theme correctly, open an issue at GitHub issues. Also report text with low contrast or colors that transform incorrectly. Mention colorMode and include a screenshot.

Next steps

• React props and Vue props: the colorMode prop
• Custom styles: theming the chrome around the canvas
• React composition and Vue composition: build chrome that themes with your app