Question T14203
Visible to All Users

How to work with Themes

created a year ago (modified a year ago)

[Ticket cloned from T14201: Issues after updated to version 1.9.102]

Can I see documentation, how to work with Themes (new functionality) ?

Answers approved by surveyjs Support

created a year ago

Hello,
Theme Editor is a UI theme designer with a user-friendly interface in which users can change colors, sizes, borders, fonts, and other survey appearance settings to give their surveys a branded look.
SurveyJS Theme Editor

Survey Creator - Enable the Theme Builder

Theme Editor is integrated into Survey Creator. You can find it in a separate Themes tab. The Themes tab provides various basic and advanced settings allowing users to customize the appearance of all survey elements. Plus - we created a number of predefined themes in light and dark variations.

To get started, display the Themes tab by enabling the showThemeTab option:

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

View Demo

Activate the Themes tab and select another theme / customize theme settings. When you finish modifying the theme, click Export to download a theme JSON definition. To load the theme within the Themes tab, click Import.
Clipboard-File-1.png

Note: A theme configuration is a JSON object stored in SurveyCreator's theme property.

Form Library - Apply a custom theme

To apply the theme to a survey at runtime, pass this JSON object to SurveyModel's applyTheme(theme) method:

JavaScript
import { SurveyModel } from "survey-core"; const surveyJson = { ... }; const survey = new SurveyModel(surveyJson); const myTheme = creator.theme; survey.applyTheme(myTheme);

View Demo

Demos

You can also try the new Theme Editor in our all-in-one demo under the Themes tab or apply different out-of-the-box theme configurations in our Form Library demos. I also recommend that you review the following demo: Customize Form Appearance. In this demo, we created an additional variation of a custom survey theme.

I hope this information can help you.

For the record: we're currently working on documentation and more demos for the new Theme builder functionality.

Should you have any further questions or require further assistance, we are here to help.