Appearance

Set --doc-* properties on your .docx-editor wrapper. Load application CSS after the editor stylesheet.

Add the dark class to a composed wrapper for dark controls. Use colorMode on the packaged editor. Dark mode also adjusts the document preview. Saved document colors remain unchanged.

Apply an application color theme

Connect your application tokens to both editor palettes. The application defines the values of --app-*; this example defines their editor mappings. Use color values for --app-brand and HSL components for --app-brand-hsl.

.docx-editor.contract-workspace,
.docx-editor.contract-workspace.dark {
  --doc-primary: var(--app-brand);
  --doc-primary-hover: var(--app-brand-hover);
  --doc-primary-light: var(--app-brand-surface);
  --doc-on-primary: var(--app-on-brand);
  --doc-focus-ring: var(--app-focus-ring);
  --primary: var(--app-brand-hsl);
  --primary-foreground: var(--app-on-brand-hsl);
  --ring: var(--app-brand-hsl);
}

Define light and dark application values for the mapped tokens. The shared rule keeps both editor themes connected to your application's active palette.

Style your controls

Keep CSS under your wrapper. These tokens and selectors work in both frameworks.

.docx-editor.contract-workspace {
  --doc-dialog-radius: 16px;
  --doc-dialog-control-radius: 8px;
  --doc-dialog-padding: 24px;
}
.docx-editor.contract-workspace .contract-toolbar {
  margin: 0;
  border-radius: 0;
  padding: 8px 12px;
  background: var(--doc-surface);
  border-bottom: 1px solid var(--doc-border);
}
.docx-editor.contract-workspace .contract-card {
  border-radius: 12px;
  background: var(--doc-surface);
}

Appearance options

Use these controls to adapt the DOCX editor interface to your application. Interface settings change the viewer. They do not replace styles stored in the DOCX file.

Interface palette reference

Set CSS color values for these properties. Override related foreground and background properties together. The default stylesheet defines separate light and dark palettes.

The shadow color properties accept colors. The complete shadow properties accept CSS box-shadow values. Use Tracked changes for revision and author color properties. Use Comments and review cards for comment highlights and active card properties.

Utility palette reference

The controls also use these scoped HSL properties. Their values contain HSL components, such as 221.2 83.2% 53.3%, without an hsl() wrapper.

Set both palettes when your application changes the complete interface theme. For example, --doc-primary controls editor-specific parts, while --primary controls utility-based parts.

Size, typography, and layer reference

Keep the layer order when you change these values. An ancestor's stacking context can still limit an editor overlay. Some specialized popups use their own fallback sizes. A wrapper override gives them the same explicit value.

Theme scope and interaction states

Put your theme class on the element that carries .docx-editor. A nested .docx-editor can declare its own defaults and override inherited properties. If you add another scope, apply your theme properties there too.

Add classes through component props instead of removing the library's classes. Use your own class with :hover, :focus-visible, :disabled, and supported data-* attributes. Toolbar buttons expose data-active and data-disabled presence attributes. Review cards expose their own item and state attributes.

Keep visible focus indicators and readable text in each theme. Use text, icons, or decorations with colors to distinguish review states.

Dark mode behavior

The packaged DOCX editor accepts colorMode="light", "dark", or "system". Its default is "light". The "system" value follows changes to the operating system preference.

For a composed editor, your application controls the .dark class on the .docx-editor wrapper. Declare dark theme overrides with .docx-editor.contract-workspace.dark after the editor stylesheet. This selector also lets your application override the library's dark palette.

Dark mode changes the on-screen page background and content presentation. It does not write these display colors into the DOCX file. Use document formatting commands when you need a saved document color.

React and Vue reference

Pass your DOCX bytes and loaded fonts to this component. The preview uses a fictional contract.

import { DocxEditor, type DocxEditorRootProps } from '@docx-editor.dev/react';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/react';
import '@docx-editor.dev/core/styles/editor.css';

const modules = [reviewModule()];

export function ContractEditor({
  bytes,
  fonts,
}: {
  bytes: Uint8Array;
  fonts: DocxEditorRootProps['fonts'];
}) {
  return (
    <div className="docx-editor contract-workspace">
      <DocxEditor.Root
        document={bytes}
        fonts={fonts}
        modules={modules}
        author="Demo reviewer"
        mode="suggesting"
        reviewDisplayMode="all-markup"
      >
        <DocxEditor.Toolbar className="contract-toolbar" />
        <DocxEditor.Viewport style={{ height: 520 }}>
          <DocxEditor.Content />
          <DocxEditor.HyperLink />
          <DocxEditor.ContextMenu />
          <DocxEditorReview />
        </DocxEditor.Viewport>
      </DocxEditor.Root>
    </div>
  );
}

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/vue';
import type { FontConfigurationFragment } from '@docx-editor.dev/vue';
import '@docx-editor.dev/core/styles/editor.css';

defineProps<{ bytes: Uint8Array; fonts: FontConfigurationFragment }>();
const modules = [reviewModule()];
</script>

<template>
  <div class="docx-editor contract-workspace">
    <DocxEditor.Root
      :document="bytes"
      :fonts="fonts"
      :modules="modules"
      author="Demo reviewer"
      mode="suggesting"
      review-display-mode="all-markup"
    >
      <DocxEditor.Toolbar class-name="contract-toolbar" />
      <DocxEditor.Viewport :style="{ height: '520px' }">
        <DocxEditor.Content />
        <DocxEditor.HyperLink />
        <DocxEditor.ContextMenu />
        <DocxEditorReview />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  </div>
</template>

More control

See Dark mode for supported parts, types, and additional examples.