Skip to main content

Themes API

Themes apply consistent fonts, colors, heading styles, and page margins across a document.

Using a theme​

import { corporate } from "docxio";

<document theme={corporate}>
  <section>
    <heading level={1}><run>Themed Document</run></heading>
    <paragraph><run>Body text inherits theme fonts and spacing.</run></paragraph>
  </section>
</document>

Built-in themes​

corporate​

Professional business styling with Calibri fonts and blue tones.

import { corporate } from "docxio";
  • Fonts: Calibri (heading, body), Courier New (mono)
  • Primary: #1F4E79 | Secondary: #2E75B6 | Accent: #ED7D31
  • Heading 1: 18pt bold, navy | Heading 2: 14pt bold, blue

academic​

Formal academic document styling with serif fonts.

import { academic } from "docxio";

minimal​

Clean, sparse styling with generous whitespace.

import { minimal } from "docxio";

Theme interface​

interface Theme {
  name: string;
  fonts: {
    heading: string;  // e.g., "Calibri"
    body: string;     // e.g., "Calibri"
    mono: string;     // e.g., "Courier New"
  };
  colors: {
    primary: string;    // Hex without # (e.g., "1F4E79")
    secondary: string;
    accent: string;
    text: string;
    textLight: string;
    background: string;
  };
  headingStyles: Record<1 | 2 | 3 | 4 | 5 | 6, HeadingThemeStyle>;
  paragraph: {
    fontSize?: number;      // Half-points (22 = 11pt)
    lineSpacing?: number;   // Twips
    spacingAfter?: number;  // Twips
  };
  table: {
    borderStyle?: string;
    borderColor?: string;
    headerBackground?: string;
    headerColor?: string;
  };
  page: {
    marginTop?: number;     // Twips
    marginRight?: number;
    marginBottom?: number;
    marginLeft?: number;
  };
}

HeadingThemeStyle​

interface HeadingThemeStyle {
  fontSize?: number;       // Half-points
  bold?: boolean;
  italic?: boolean;
  color?: string;          // Hex without #
  spacingBefore?: number;  // Twips
  spacingAfter?: number;   // Twips
}

Creating a custom theme​

import type { Theme } from "docxio";

const ocean: Theme = {
  name: "ocean",
  fonts: {
    heading: "Segoe UI",
    body: "Segoe UI",
    mono: "Consolas",
  },
  colors: {
    primary: "006994",
    secondary: "40B5AD",
    accent: "FF6B6B",
    text: "1A1A2E",
    textLight: "7C8DB0",
    background: "FFFFFF",
  },
  headingStyles: {
    1: { fontSize: 36, bold: true, color: "006994", spacingBefore: 240, spacingAfter: 120 },
    2: { fontSize: 28, bold: true, color: "40B5AD", spacingBefore: 200, spacingAfter: 100 },
    3: { fontSize: 24, bold: true, color: "006994", spacingBefore: 160, spacingAfter: 80 },
    4: { fontSize: 22, bold: true, color: "40B5AD", spacingBefore: 120, spacingAfter: 60 },
    5: { fontSize: 20, bold: true, italic: true, color: "7C8DB0", spacingBefore: 100, spacingAfter: 40 },
    6: { fontSize: 20, italic: true, color: "7C8DB0", spacingBefore: 80, spacingAfter: 40 },
  },
  paragraph: {
    fontSize: 22,
    lineSpacing: 276,
    spacingAfter: 160,
  },
  table: {
    borderStyle: "single",
    borderColor: "006994",
    headerBackground: "006994",
    headerColor: "FFFFFF",
  },
  page: {
    marginTop: 1440,
    marginRight: 1440,
    marginBottom: 1440,
    marginLeft: 1440,
  },
};

See the Styles and Themes guide for more usage examples.