---
title: Create a Custom Theme for a PDF Form
product: PDF Generator
description: Learn how to create and apply a custom, brand-aligned theme to your PDF forms using CSS-based design tokens.
framework: Vanilla JS
source: https://surveyjs.io/pdf-generator/examples/create-custom-pdf-form-theme/vanillajs
index: https://surveyjs.io/pdf-generator/examples/overview.md
---
# Create a Custom Theme for a PDF Form (Vanilla JS)
SurveyJS PDF Generator uses the same theming system as all SurveyJS products and supports PDF customization through CSS-based [design tokens](/documentation/design-tokens-css-customization). This demo shows how to apply a custom theme with branded colors (primary blue, accent gold, and coordinated foreground/background tokens) to both the web form and its PDF version.
## Custom Theme
A custom theme is an [`ITheme`](/form-library/documentation/api-reference/itheme) JSON object that defines the visual appearance of a form, including its color palette, CSS variables, header settings, and other options. You can create it using the [SurveyJS Theme Editor](/survey-creator/documentation/theme-editor), author the JSON manually, or have an AI assistant generate it.
In this demo, the custom theme defines:
- A blue-based brand palette with primary (`#1B4B6E`) and secondary (`#143A56`) tones
- A gold accent color for highlights (`#C4A35A`)
- A neutral background system for surfaces and layout (`#FFFFFF`, `#F7F9FB`, `#F3F6F9`)
- A consistent text hierarchy using primary and secondary foreground colors (`#1A2332`, `#5C6B7A`)
- Border, input, and page styling aligned with the brand palette (`#1B4B6E`, `#D4DCE4`)
Refer to the `theme.js` file for the full set of variables.
## Apply a Custom Theme
Pass the theme JSON object to the [`applyTheme`](/pdf-generator/documentation/api-reference/surveypdf#applyTheme) method of a [`SurveyPDF`](/pdf-generator/documentation/api-reference/surveypdf) instance. To apply the same theme to the web form, use the same method on the [`SurveyModel`](/form-library/documentation/api-reference/survey-data-model) instance:
```js
import { Model } from "survey-core";
import { SurveyPDF } from "survey-pdf";
const surveyJson = { /* Survey JSON schema */ };
const themeJson = { /* Theme JSON object */ };
const survey = new Model(surveyJson);
survey.applyTheme(themeJson);
const pdfOptions = { /* PDF form settings */ };
const surveyPDF = new SurveyPDF(surveyJson, pdfOptions);
surveyPDF.applyTheme(themeJson);
surveyPDF.save("my-form.pdf");
```
## See Also
- [Themes](/documentation/themes-and-custom-styles)
- [Design Tokens](/documentation/design-tokens-css-customization)
- [PDF Form Settings](/pdf-generator/documentation/customize-pdf-form-settings)
- [PDF Appearance Customization](/pdf-generator/documentation/pdf-appearance-customization)
- [Customize Question Rendering in PDF](/pdf-generator/documentation/customize-survey-question-rendering-in-pdf-form)
## Files
### `public/index.html`
```html
```
### `src/index.css`
```css
/* You can add your custom CSS here. */
```
### `src/index.js`
```js
import { Model } from "survey-core";
import "survey-js-ui";
import { SurveyPDF } from "survey-pdf";
import { Spacious } from "survey-pdf/layouts";
import "survey-core/survey-core.min.css";
import { themeJson } from "./theme";
import "./index.css";
import { json } from "./json";
function createSurveyPdfModel (surveyModel) {
const options = {
fontSize: BRAND.pdfOptions.fontSize,
margins: BRAND.pdfOptions.margins
};
const surveyPDF = new SurveyPDF(json, options);
if (surveyModel) {
surveyPDF.data = surveyModel.data;
surveyPDF.locale = surveyModel.locale;
surveyPDF.applyTheme(themeJson);
}
surveyPDF.applyLayout(Spacious);
// Set the brand name variable for the PDF export
surveyPDF.setVariable("brand_name", BRAND.name);
// Add a PDF page header: document title and ID
surveyPDF.onRenderHeader.add((_, canvas) => {
canvas.drawText({
text: BRAND.documentTitle + " · " + BRAND.documentId,
fontSize: 9,
horizontalAlign: "right",
verticalAlign: "middle",
margins: { right: 12 }
});
});
// PDF page footer: page number, website, and copyright
surveyPDF.onRenderFooter.add((_, canvas) => {
const year = new Date().getFullYear();
const footer = canvas.rect;
const splitY = (footer.yTop + footer.yBot) / 2;
const topRow = {
xLeft: footer.xLeft,
xRight: footer.xRight,
yTop: footer.yTop,
yBot: splitY
};
const bottomRow = {
xLeft: footer.xLeft,
xRight: footer.xRight,
yTop: splitY,
yBot: footer.yBot
};
canvas.drawText({
text: BRAND.website,
fontSize: 7,
horizontalAlign: "left",
verticalAlign: "middle",
margins: { left: 12 },
rect: topRow
});
canvas.drawText({
text: canvas.pageNumber + " / " + canvas.pageCount,
fontSize: 7,
horizontalAlign: "right",
verticalAlign: "middle",
margins: { right: 12 },
rect: topRow
});
canvas.drawText({
text: "© " + year + " " + BRAND.name,
fontSize: 6,
horizontalAlign: "center",
verticalAlign: "middle",
rect: bottomRow
});
});
return surveyPDF;
}
function saveSurveyToPdf (filename, surveyModel) {
const pdfDoc = createSurveyPdfModel(surveyModel);
if (!pdfDoc) return;
pdfDoc.save(filename);
}
const previewDiv = document.getElementById("pdf-preview");
const previewEmbed = document.getElementById("pdf-preview-frame");
let pdfBlobUrl;
function showPdfPreview(surveyModel) {
if (!previewDiv || !previewEmbed) return;
const pdfDoc = createSurveyPdfModel(surveyModel);
if (!pdfDoc) return;
pdfDoc.raw("blob").then((blob) => {
if (pdfBlobUrl) {
URL.revokeObjectURL(pdfBlobUrl);
}
pdfBlobUrl = URL.createObjectURL(blob);
previewEmbed.setAttribute("src", pdfBlobUrl);
previewDiv.style.display = "block";
});
}
function previewPdf(surveyModel) {
if (!previewDiv) return;
if (previewDiv.style.display !== "none") {
previewDiv.style.display = "none";
return;
}
showPdfPreview(surveyModel);
}
/**
* Brand metadata for Summit Advisory Group (fictional demo client).
* Visual styling comes from `theme.json`; this object is used for PDF header/footer,
* text, survey variables, and PDF export options.
*/
const BRAND = {
name: "Summit Advisory Group",
tagline: "Strategic clarity for growing organizations",
documentTitle: "Client Engagement Form",
documentId: "ENG-2026",
website: "www.summitadvisory.example",
supportEmail: "engagements@summitadvisory.example",
pdfOptions: {
fontSize: 11,
margins: {
left: 15,
right: 15,
top: 22,
bot: 18
}
}
};
const survey = new Model(json);
survey.applyTheme(themeJson);
survey.showCompleteButton = false;
survey.navigationButtonsLocation = "topBottom";
survey.addNavigationItem({
id: "survey_save_as_file",
title: "Download PDF",
action: () => {
saveSurveyToPdf("surveyResult.pdf", survey);
}
});
survey.addNavigationItem({
id: "survey_pdf_preview",
title: "Preview PDF",
visible: window.navigator.pdfViewerEnabled,
action: () => {
previewPdf(survey);
}
});
// Set the brand name variable for the read-only HTML element.
survey.setVariable("brand_name", BRAND.name);
survey.render(document.getElementById("surveyElement"));
```
### `src/json.js`
```js
export const json = {
"title": "Client Engagement Form",
"description": "Complete this form to initiate a professional services engagement. Your responses will be exported to a branded PDF record.",
"logo": "data:image/png;base64,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",
"logoWidth": "200px",
"logoHeight": "56px",
"logoPosition": "right",
"pages": [
{
"name": "client_information",
"title": "Client Information",
"description": "Primary contact and organization details",
"elements": [
{
"type": "panel",
"name": "organization_panel",
"title": "Organization",
"elements": [
{
"type": "text",
"name": "company_name",
"width": "60%",
"maxWidth": "50%",
"title": "Legal company name"
},
{
"type": "text",
"name": "industry",
"width": "40%",
"maxWidth": "50%",
"startWithNewLine": false,
"title": "Industry"
},
{
"type": "text",
"name": "tax_id",
"width": "50%",
"maxWidth": "50%",
"title": "Tax ID / EIN"
},
{
"type": "dropdown",
"name": "company_size",
"width": "50%",
"startWithNewLine": false,
"title": "Company size",
"choices": [
"1–10 employees",
"11–50 employees",
"51–200 employees",
"201–1,000 employees",
"1,000+ employees"
]
}
]
},
{
"type": "panel",
"name": "contact_panel",
"title": "Primary Contact",
"elements": [
{
"type": "text",
"name": "contact_name",
"width": "50%",
"title": "Full name"
},
{
"type": "text",
"name": "contact_title",
"width": "50%",
"startWithNewLine": false,
"title": "Job title"
},
{
"type": "text",
"name": "contact_phone",
"width": "50%",
"title": "Phone",
"inputType": "tel"
},
{
"type": "text",
"name": "contact_email",
"width": "50%",
"startWithNewLine": false,
"title": "Email",
"inputType": "email"
},
{
"type": "comment",
"name": "billing_address",
"title": "Billing address",
"rows": 3
}
]
}
]
},
{
"name": "engagement_scope",
"title": "Engagement Scope",
"description": "Services requested and project parameters",
"elements": [
{
"type": "checkbox",
"name": "services_requested",
"title": "Services requested",
"choices": [
"Strategic planning",
"Financial advisory",
"Operational assessment",
"Market research",
"Change management",
"Interim executive support"
],
"colCount": 2
},
{
"type": "matrixdropdown",
"name": "deliverables",
"title": "Planned deliverables",
"columns": [
{
"name": "priority",
"title": "Priority",
"cellType": "dropdown",
"choices": [
"High",
"Medium",
"Low"
]
},
{
"name": "target_date",
"title": "Target date",
"cellType": "text",
"inputType": "date"
}
],
"rows": [
{
"value": "discovery",
"text": "Discovery workshop"
},
{
"value": "assessment",
"text": "Assessment report"
},
{
"value": "roadmap",
"text": "Strategic roadmap"
},
{
"value": "implementation",
"text": "Implementation plan"
}
]
},
{
"type": "panel",
"name": "timeline_panel",
"title": "Timeline & Budget",
"elements": [
{
"type": "text",
"name": "start_date",
"width": "33%",
"startWithNewLine": false,
"title": "Preferred start date",
"inputType": "date"
},
{
"type": "dropdown",
"name": "engagement_duration",
"width": "33%",
"startWithNewLine": false,
"title": "Estimated duration",
"choices": [
"4–6 weeks",
"2–3 months",
"4–6 months",
"6–12 months",
"Ongoing retainer"
]
},
{
"type": "dropdown",
"name": "budget_range",
"width": "34%",
"startWithNewLine": false,
"title": "Budget range (USD)",
"choices": [
"Under $25,000",
"$25,000 – $75,000",
"$75,000 – $150,000",
"$150,000 – $300,000",
"Over $300,000"
]
},
{
"type": "comment",
"name": "project_summary",
"title": "Project summary & objectives"
}
]
}
]
},
{
"name": "authorization",
"title": "Terms & Authorization",
"description": "Review terms and provide your signature",
"elements": [
{
"type": "html",
"name": "terms_block",
"html": "All work is performed under a separate Master Services Agreement (MSA).
Confidential information shared in this form is protected under our mutual NDA.
Invoices are due Net 30 from the date of issue unless otherwise agreed in writing.
Either party may terminate with 30 days written notice after the initial discovery phase.
By signing below, you confirm that you are authorized to engage {brand_name} on behalf of the organization named in this form.
"
},
{
"type": "boolean",
"name": "terms_accepted",
"title": "I have read and agree to the engagement terms summarized above"
},
{
"type": "panel",
"name": "signature_panel",
"title": "Authorization",
"elements": [
{
"type": "text",
"name": "signer_name",
"width": "50%",
"startWithNewLine": false,
"title": "Printed name"
},
{
"type": "text",
"name": "sign_date",
"width": "50%",
"startWithNewLine": false,
"title": "Date",
"defaultValueExpression": "today()",
"inputType": "date"
},
{
"type": "signaturepad",
"name": "client_signature",
"title": "Authorized signature",
"signatureWidth": 420,
"signatureHeight": 130
}
]
}
]
}
],
"questionsOnPageMode": "singlePage"
}
;
```
### `src/theme.js`
```js
export const themeJson = {
"themeName": "summit-advisory",
"colorPalette": "light",
"isPanelless": false,
"cssVariables": {
"--sjs2-color-project-brand-600": "#1B4B6E",
"--sjs2-color-fg-brand-primary": "#1B4B6E",
"--sjs2-color-fg-brand-secondary": "#143A56",
"--sjs2-color-bg-brand-primary": "#1B4B6E",
"--sjs2-color-bg-brand-secondary": "#E8F1F6",
"--sjs2-color-bg-brand-primary-dim": "#143A56",
"--sjs2-color-bg-basic-primary": "#FFFFFF",
"--sjs2-color-bg-basic-primary-dim": "#FFFFFF",
"--sjs2-color-bg-basic-secondary": "#F7F9FB",
"--sjs2-color-bg-basic-secondary-dim": "#F3F6F9",
"--sjs2-color-fg-basic-primary": "#1A2332",
"--sjs2-color-fg-basic-secondary": "#5C6B7A",
"--sjs2-color-bg-accent-primary": "#C4A35A",
"--sjs2-color-border-brand-primary": "#1B4B6E",
"--sjs2-color-border-basic-secondary": "#D4DCE4",
"--sjs2-color-utility-body": "#F7F9FB",
"--sjs2-color-utility-surface-survey": "#F7F9FB",
"--sjs2-color-utility-surface-survey-panelless": "#F7F9FB",
"--sjs2-color-component-input-default-line": "#1B4B6E",
"--sjs2-color-component-page-default-title": "#143A56",
"--sjs2-color-component-page-default-description": "#5C6B7A",
"--sjs2-color-component-question-default-title": "#1A2332",
"--sjs2-border-effect-surface-default": "0px 0px 0px 1px #D4DCE4"
}
}
;
```
### `package.json`
```json
{
"dependencies": {
"survey-core": "latest",
"survey-js-ui": "latest",
"survey-pdf": "latest"
}
}
```
## Other Frameworks
- [Angular](https://surveyjs.io/pdf-generator/examples/create-custom-pdf-form-theme/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/create-custom-pdf-form-theme/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/create-custom-pdf-form-theme/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/create-custom-pdf-form-theme/jquery.md)