Theming

Themes are plain TypeScript objects. PDF engines do not consume DOM CSS variables, so tokens stay in TypeScript and resolve inside each component.

Theme shape

PdfcnTheme

export type PdfcnTheme = {
  name: string;
  primitives: PrimitiveTokens;
  colors: ColorTokens;
  typography: TypographyTokens;
  spacing: SpacingTokens;
  page: PageTokens;
};

Token groups

primitives

Typography scale, spacing units, font weights, line heights, radii, letter spacing.

colors

Semantic slots: foreground, background, primary, muted, border, status colors.

typography

Body and heading font families, sizes, and line heights for the document.

spacing

Page margins plus section, paragraph, and component gaps in points.

page

Page size (A4 / LETTER / LEGAL) and orientation.

Provide a theme

Wrap the document with PdfcnThemeProvider. Without a provider, components fall back to professionalTheme.

Theme provider

<script setup lang="ts">
import { Document } from '@formepdf/vue';
import PdfcnThemeProvider from '@/components/pdf/PdfcnThemeProvider.vue';
import { minimalTheme } from '@/lib/pdfcn/themes/minimal';
</script>

<template>
  <PdfcnThemeProvider :theme="minimalTheme">
    <Document>…</Document>
  </PdfcnThemeProvider>
</template>

Theme in action

Themed component gallery

Default professional theme applied through the provider.

Browser render

Rendering the PDF…

Vue SFC → Uint8Array

Presets and builder

Browse all nine presets and export a customized theme object on the theme builder page.