Customize Form Appearance

Survey Creator by SurveyJS features an integrated Theme Editor—a powerful form styling tool that automatically generates a form UI theme definition in JSON format. Theme Editor provides a smart, user-friendly interface that enables you to add a background image to your form, customize fonts, change accent colors, and more. This example introduces basic Theme Editor functionalities. A custom theme is already applied. You can customize it further using editors in the Property Grid or export your custom theme as a JSON object and apply it to a standalone SurveyJS form in your application.

Theme Editor is integrated into Survey Creator as a separate Themes tab, which is hidden by default. To display the tab, enable the showThemeTab property. If you want to switch to the Themes tab programmatically, assign "theme" to the activeTab property (see the component code listing).

SurveyJS themes use CSS variables to specify colors, fonts, sizes, and other survey appearance settings. These variables are bound to editors that you can find in Theme Editor's Property Grid. To create a custom theme, change values in these editors.

Once you finish customization, click the Export button to download a JSON object with CSS variables and other theme settings:

To apply your custom theme to a standalone survey, pass the theme JSON object to SurveyModel's applyTheme(theme) method:

import { Model } from "survey-core";
const surveyJson = { ... };
const survey = new Model(surveyJson);

survey.applyTheme({
  "cssVariables": {
      // ...
  },
  "themeName": "doubleborder",
  "colorPalette": "dark",
  "isPanelless": true
});

If you want to apply a custom theme to a survey being configured in Survey Creator, assign the theme JSON object to SurveyCreatorModel's theme property:

import { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = {
  showThemeTab: true
};
const creator = new SurveyCreatorModel(creatorOptions);

const themeJson = { ... };
creator.theme = themeJson;

Theme JSON objects can be stored on your server to let users save, share, and restore custom themes or switch between them. Refer to the following help topic for information on how to save theme JSON objects to a remote storage:

Save and Load Custom Themes