Dark mode

Set the color mode

Pass colorMode to the editor.

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

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

Connect your application theme

colorMode is a controlled prop. The editor has no internal toggle, so your application owns the value.

import { useState } from 'react';
import { DocxEditor } from '@docx-editor.dev/react';

export function ThemedEditor({ bytes }: { bytes: Uint8Array }) {
  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');

  return (
    <>
      <button
        type="button"
        onClick={() => setColorMode((mode) => (mode === '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';

defineProps<{ bytes: Uint8Array }>();
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>

In a composed editor, set colorMode on the root. Every part inside it uses the same theme.

<DocxEditor.Root document={bytes} colorMode="system">
  <DocxEditor.Toolbar />
  <DocxEditor.Viewport>
    <DocxEditor.Content />
  </DocxEditor.Viewport>
</DocxEditor.Root>

<DocxEditorRoot :document="bytes" color-mode="system">
  <DocxEditorToolbar />
  <DocxEditorViewport>
    <DocxEditorContent />
  </DocxEditorViewport>
</DocxEditorRoot>

A dark class outside the editor, such as on html, does not select the editor color tokens. A few utility variants and the drawing placeholder card still react to it. Pass your application theme to colorMode instead.

Theme custom controls

Read the resolved mode in parts that you build, such as a side panel.

import { useEditorColorMode } from '@docx-editor.dev/react';

function NotesPanel() {
  const { colorMode } = useEditorColorMode();
  return <aside className={colorMode === 'dark' ? 'notes notes--dark' : 'notes'} />;
}

import { computed } from 'vue';
import { useEditorColorMode } from '@docx-editor.dev/vue';

const { colorMode } = useEditorColorMode();
const notesClass = computed(() => (colorMode.value === 'dark' ? 'notes notes--dark' : 'notes'));

For the color tokens, see Appearance.

Limits

• With 'system', a server render and the first browser render report 'light'. The value updates after the editor reads the setting.
• Outside the editor root, or when the root has no colorMode, useEditorColorMode() returns 'light'.
• The packaged editor with chrome={false} also reports 'light'. Read your own colorMode value there.
• The document preview changes color lightness and keeps hue. Images keep their original colors.
• The preview does not change authored colors or saved DOCX bytes.
• Printing uses document colors and ignores colorMode.

See also

• React props and Vue props
• Appearance
• React composition and Vue composition