[Ticket cloned from T14201: Issues after updated to version 1.9.102]
Can I see documentation, how to work with Themes (new functionality) ?
[Ticket cloned from T14201: Issues after updated to version 1.9.102]
Can I see documentation, how to work with Themes (new functionality) ?
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.
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:
JavaScriptimport { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = {
// ...
showThemeTab: true
};
const creator = new SurveyCreatorModel(creatorOptions);
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.
Note: A theme configuration is a JSON object stored in SurveyCreator
's theme
property.
To apply the theme to a survey at runtime, pass this JSON object to SurveyModel
's applyTheme(theme)
method:
JavaScriptimport { SurveyModel } from "survey-core";
const surveyJson = { ... };
const survey = new SurveyModel(surveyJson);
const myTheme = creator.theme;
survey.applyTheme(myTheme);
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.