Getting started

Theming

The renderers emit ordinary DOM with ordinary CSS classes, so the document is styleable from your own stylesheet. Three groups of custom properties, with different rules for each.

What you can change

The presentation viewer draws slides on a canvas that is not part of any slide, and those surfaces are yours. Set them anywhere above the viewer.

Property	Default	What it paints
`--apertura-canvas-background`	`#2b2b2f`	The area around the slide.
`--apertura-slide-background`	`#ffffff`	The slide itself, when it declares no fill of its own.
`--apertura-slide-text`	`#1a1a1a`	Text with no colour from the theme or the shape.
`--apertura-chrome-text`	`#d0d0d4`	Slide counter, notes and toolbar labels.

dark.css

/* Match the viewer chrome to your own dark theme. */
.my-app[data-theme='dark'] {
  --apertura-canvas-background: #0c0d0f;
  --apertura-chrome-text: #b8b4ab;
}

What you can read

The document carries its own theme, and the Word renderer publishes it as custom properties on the rendered root. They are outputs, not inputs: read them to make your interface agree with the document rather than overriding them.

--apertura-theme-accent1 … accent6, and the other theme colour slots, as hex.
--apertura-theme-major-font and --apertura-theme-minor-font, quoted and ready to use in a font-family.

toolbar.css

/* A toolbar that takes its accent from whatever document is open. */
.toolbar {
  border-bottom: 2px solid var(--apertura-theme-accent1, currentColor);
  font-family: var(--apertura-theme-minor-font, inherit);
}

Class names

Formatting is emitted as shared classes rather than inline styles — a document with 200 000 runs produces about fifty rules instead of 200 000 style attributes — and the structural classes are stable enough to target:

Class	Element
`.apertura-docx-page`	One page, sized before its content exists.
`.apertura-docx-page-content`	The printable area inside the margins.
`.apertura-docx-header`, `.apertura-docx-footer`	Running head and foot for the section.
`.apertura-list-label`	A computed list number, emitted as text.
`.apertura-pptx__slide`, `.apertura-pptx__shape`	A slide and the shapes on it.

Two properties that are not yours

--apertura-half-leading and --apertura-border-excess are written by the renderer and read back by the layout engine while it measures. Overriding them does not restyle anything — it makes the pagination wrong.

Printing

Pages are real elements with real sizes, and list numbers are text rather than CSS counters, so printing works without a special path. Turn virtualisation off first if you need every page in the DOM at once.