Create a Custom Theme for a PDF Form
SurveyJS PDF Generator uses the same theming system as all SurveyJS products and supports PDF customization through CSS-based design tokens. 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 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, 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 method of a SurveyPDF instance. To apply the same theme to the web form, use the same method on the SurveyModel instance:
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");