Styles and Themes

Paragraph styles

Define reusable paragraph styles in the <document> element:

<document styles={{
  paragraphStyles: [
    {
      id: "BodyText",
      name: "Body Text",
      basedOn: "Normal",
      spacing: { after: 200, line: 276, lineRule: "auto" },
      runProps: { fontSize: 22, fontFamily: "Calibri" },
    },
    {
      id: "Quote",
      name: "Quote",
      basedOn: "Normal",
      alignment: "center",
      indentation: { left: 720, right: 720 },
      runProps: { italic: true, color: "595959" },
    },
  ],
}}>
  <section>
    <paragraph style="BodyText"><run>Regular body text.</run></paragraph>
    <paragraph style="Quote"><run>An indented, italic quote.</run></paragraph>
  </section>
</document>

Character styles

Character styles apply to runs without affecting paragraph layout:

<document styles={{
  characterStyles: [
    {
      id: "Emphasis",
      name: "Emphasis",
      italic: true,
      color: "2E74B5",
    },
  ],
}}>
  <section>
    <paragraph>
      <run>Normal text and </run>
      <run style="Emphasis">emphasized text</run>
    </paragraph>
  </section>
</document>

Built-in themes

docxio ships with three themes that set fonts, colors, heading styles, and page margins:

import { corporate, academic, minimal } from "docxio";

<document theme={corporate}>...</document>
<document theme={academic}>...</document>
<document theme={minimal}>...</document>

Theme	Heading font	Body font	Primary color
corporate	Calibri	Calibri	#1F4E79
academic	Times New Roman	Times New Roman	(varies)
minimal	Helvetica	Helvetica	(varies)

Custom themes

Create a custom theme by implementing the Theme interface:

import type { Theme } from "docxio";

const myTheme: Theme = {
  name: "brand",
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "JetBrains Mono",
  },
  colors: {
    primary: "6C3AE0",
    secondary: "9B6FE8",
    accent: "FF6B35",
    text: "1A1A1A",
    textLight: "6B7280",
    background: "FFFFFF",
  },
  headingStyles: {
    1: { fontSize: 36, bold: true, color: "6C3AE0", spacingBefore: 240, spacingAfter: 120 },
    2: { fontSize: 28, bold: true, color: "6C3AE0", spacingBefore: 200, spacingAfter: 100 },
    3: { fontSize: 24, bold: true, color: "9B6FE8", spacingBefore: 160, spacingAfter: 80 },
    4: { fontSize: 22, bold: true, color: "9B6FE8", spacingBefore: 120, spacingAfter: 60 },
    5: { fontSize: 20, bold: true, italic: true, color: "6B7280", spacingBefore: 100, spacingAfter: 40 },
    6: { fontSize: 20, italic: true, color: "6B7280", spacingBefore: 80, spacingAfter: 40 },
  },
  paragraph: {
    fontSize: 22,
    lineSpacing: 276,
    spacingAfter: 160,
  },
  table: {
    borderStyle: "single",
    borderColor: "6C3AE0",
    headerBackground: "6C3AE0",
    headerColor: "FFFFFF",
  },
  page: {
    marginTop: 1440,
    marginRight: 1440,
    marginBottom: 1440,
    marginLeft: 1440,
  },
};

Theme interface reference

Property	Type	Description
name	string	Theme identifier
fonts.heading	string	Font for headings
fonts.body	string	Font for body text
fonts.mono	string	Font for monospace
colors.primary	string	Primary brand color (hex)
colors.secondary	string	Secondary color
colors.accent	string	Accent color
colors.text	string	Default text color
colors.textLight	string	Light/muted text color
colors.background	string	Background color
headingStyles	Record<1-6, HeadingThemeStyle>	Per-level heading styles
paragraph	object	Default paragraph font size, line spacing, spacing after
table	object	Table border style/color, header background/color
page	object	Page margins (top, right, bottom, left) in twips