Theme Editor
SurveyJS drag-and-drop HTML form builder is a powerful client-side form solution that makes it easy to create, customize, and deploy web forms and surveys in any JavaScript application. One of its standout features is the Theme Editor, an intuitive visual editor for CSS. The Theme Editor lets users personalize the look of their forms to match their brand or desired aesthetic. In this article, we will learn about form CSS customization, explore the functionalities of the Theme Editor, and configure an advanced form header.
Introduction to the Theme Editor
Experienced developers and web designers can create web forms and customize form CSS, but this often requires significant time and effort. For content editors and other end users, customizing the look of web elements is nearly impossible without a graphical interface. As a result, they usually rely on developers for form appearance customization, which can delay development and increase project costs.
The embedded Theme Editor changes this dynamic. Users can now create unlimited custom themes to enhance their forms and align them with their organization's colors quickly and easily.
SurveyJS Form Builder includes the embedded Theme Editor, offering a user-friendly interface for customizing the appearance of SurveyJS surveys and forms. The Theme Editor provides options to adjust input field colors, borders, fonts, padding, and margins, change the background image or color of the form, update the logo and header text position, and modify the header color or background image. This level of customization ensures that your forms and surveys are functional, visually appealing, and consistent with your brand's identity.
Understanding SurveyJS Form Library Themes
A SurveyJS theme is a JSON object containing SCSS variables that specify the colors, sizes, fonts, and other appearance settings of SurveyJS forms. All the theme settings that users adjust in the Theme Editor's settings panel are saved as corresponding SCSS variables, which together comprise the theme JSON object. This object can be exported and imported via the UI or saved and loaded within an internal theme storage.
SurveyJS themes are not linked to particular forms; this allows users to create any number of themes that can be applied to various forms using the survey.applyTheme(themeObject) function. Once a user modifies theme settings, the Theme Editor immediately updates the corresponding variables of the theme JSON object. Changes appear in a live preview, allowing form builders to see the theme updates in real-time.
import { Model } from "survey-core";
const themeJson = {
"themeName": "custom",
"colorPalette": "light",
"isPanelless": true,
"backgroundImage": "",
"backgroundOpacity": 1,
"backgroundImageAttachment": "scroll",
"backgroundImageFit": "cover",
"cssVariables": {
"--sjs-editorpanel-backcolor": "rgba(158, 117, 159, 0.5)",
"--sjs-editorpanel-hovercolor": "rgba(244, 244, 249, 1)",
"--sjs-questionpanel-hovercolor": "rgba(244, 244, 249, 1)",
"--sjs-corner-radius": "4px",
"--sjs-base-unit": "8px",
//...
}
};
const json = //... A survey layout definition
const survey = new Model(json);
survey.applyTheme(themeJson);
View Full Code
import { Model } from "survey-core";
const themeJson = {
"themeName": "custom",
"colorPalette": "light",
"isPanelless": true,
"backgroundImage": "",
"backgroundOpacity": 1,
"backgroundImageAttachment": "scroll",
"backgroundImageFit": "cover",
"cssVariables": {
"--sjs-editorpanel-backcolor": "rgba(158, 117, 159, 0.5)",
"--sjs-editorpanel-hovercolor": "rgba(244, 244, 249, 1)",
"--sjs-questionpanel-hovercolor": "rgba(244, 244, 249, 1)",
"--sjs-corner-radius": "4px",
"--sjs-base-unit": "8px",
"--sjs-font-pagetitle-size": "20px",
"--sjs-font-pagetitle-color": "rgba(52, 50, 62, 1)",
"--sjs-shadow-small": "0px 0px 0px 1px rgba(52, 50, 62, 0.05), 0px 1px 2px 0px rgba(52, 50, 62, 0.15)",
"--sjs-font-questiontitle-color": "rgba(52, 50, 62, 1)",
"--sjs-font-questiondescription-color": "rgba(52, 50, 62, 0.5)",
"--sjs-shadow-inner": "0px 1px 2px 0px rgba(52, 50, 62, 0.15)",
"--sjs-font-editorfont-weight": "700",
"--sjs-font-editorfont-color": "rgba(255, 255, 255, 1)",
"--sjs-font-editorfont-placeholdercolor": "rgba(52, 50, 62, 0.5)",
"--sjs-border-default": "rgba(52, 50, 62, 0.25)",
"--sjs-border-light": "rgba(52, 50, 62, 0.15)",
"--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
"--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
"--sjs-general-backcolor-dim-light": "rgba(255, 255, 255, 1)",
"--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
"--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
"--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
"--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
"--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
"--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
"--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
"--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
"--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
"--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.03), 0px 0px 0px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-inner-reset": "0px 0px 0px 0px rgba(52, 50, 62, 0.15)",
"--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
"--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-green": "rgba(25, 179, 148, 1)",
"--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
"--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-blue": "rgba(67, 127, 217, 1)",
"--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
"--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-yellow": "rgba(255, 152, 20, 1)",
"--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
"--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-article-font-xx-large-textDecoration": "none",
"--sjs-article-font-xx-large-fontWeight": "700",
"--sjs-article-font-xx-large-fontStyle": "normal",
"--sjs-article-font-xx-large-fontStretch": "normal",
"--sjs-article-font-xx-large-letterSpacing": "0",
"--sjs-article-font-xx-large-lineHeight": "64px",
"--sjs-article-font-xx-large-paragraphIndent": "0px",
"--sjs-article-font-xx-large-textCase": "none",
"--sjs-article-font-x-large-textDecoration": "none",
"--sjs-article-font-x-large-fontWeight": "700",
"--sjs-article-font-x-large-fontStyle": "normal",
"--sjs-article-font-x-large-fontStretch": "normal",
"--sjs-article-font-x-large-letterSpacing": "0",
"--sjs-article-font-x-large-lineHeight": "56px",
"--sjs-article-font-x-large-paragraphIndent": "0px",
"--sjs-article-font-x-large-textCase": "none",
"--sjs-article-font-large-textDecoration": "none",
"--sjs-article-font-large-fontWeight": "700",
"--sjs-article-font-large-fontStyle": "normal",
"--sjs-article-font-large-fontStretch": "normal",
"--sjs-article-font-large-letterSpacing": "0",
"--sjs-article-font-large-lineHeight": "40px",
"--sjs-article-font-large-paragraphIndent": "0px",
"--sjs-article-font-large-textCase": "none",
"--sjs-article-font-medium-textDecoration": "none",
"--sjs-article-font-medium-fontWeight": "700",
"--sjs-article-font-medium-fontStyle": "normal",
"--sjs-article-font-medium-fontStretch": "normal",
"--sjs-article-font-medium-letterSpacing": "0",
"--sjs-article-font-medium-lineHeight": "32px",
"--sjs-article-font-medium-paragraphIndent": "0px",
"--sjs-article-font-medium-textCase": "none",
"--sjs-article-font-default-textDecoration": "none",
"--sjs-article-font-default-fontWeight": "400",
"--sjs-article-font-default-fontStyle": "normal",
"--sjs-article-font-default-fontStretch": "normal",
"--sjs-article-font-default-letterSpacing": "0",
"--sjs-article-font-default-lineHeight": "28px",
"--sjs-article-font-default-paragraphIndent": "0px",
"--sjs-article-font-default-textCase": "none",
"--sjs-general-backcolor-dim": "#F8F8F6",
"--sjs-primary-backcolor": "rgba(52, 50, 62, 1)",
"--sjs-primary-backcolor-dark": "rgba(107, 103, 126, 1)",
"--sjs-primary-backcolor-light": "rgba(227, 227, 237, 1)",
"--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
"--sjs-special-red": "rgba(229, 10, 62, 1)",
"--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
"--sjs-font-surveytitle-size": "24px",
"--sjs-font-headerdescription-color": "rgba(255, 255, 255, 1)",
"--sjs-header-backcolor": "transparent"
},
"header": {
"height": 320,
"textAreaWidth": 340,
"backgroundImage": "https://api.surveyjs.io/private/Surveys/files?name=d00d0812-8687-4d6d-b8b8-cc895bdf1957",
"logoPositionX": "left",
"descriptionPositionX": "right"
},
"headerView": "advanced"
}
const json = //... A survey layout definition
const survey = new Model(json);
survey.applyTheme(themeJson);
Theme Settings
The Theme Settings panel displays multiple editors split into the following categories:
General
Contains a theme selector, a dark/light mode switch, and a toggle that adds/removes question boxes.Header
Allows designers to configure both basic and advanced headers.Background
Groups settings that configure a form background. Users can change a background color or attach a background image with additional settings, such as opacity and image positioning.Appearance
Contains basic and advanced appearance settings. Basic settings include accent color, element opacity, font settings, and survey element scale factor. They are suitable for quick theme modifications. Advanced settings allow designers to customize every aspect of a form and are suitable for experienced designers and/or specific design requirement. They become available when users switch on the "Advanced mode" toggle.
Users can quickly locate desired appearance options using the search bar.
Some theme settings include a question mark icon that provides a short helper text to clarify the particular setting.
The Theme Settings panel includes a list of predefined themes for users to choose from.
Each predefined theme supports light and dark modes. A theme is a color scheme that updates form colors, but it does not affect appearance settings such as border radius, font settings, shadow effects, and element sizes. Designers can select a different theme to see if it fits and further customize the colors as needed.
If predefined theme colors do not fit the desired output, a quick way to align the form with your brand's colors is to specify the accent color. The accent color is the core color of a SurveyJS theme, and all other colors adjust around this baseline color. Users can change individual element colors if needed, but often, selecting your company's main color is sufficient to make the form perfectly match your company's website.
Header Settings
A form header displays the form title, description, and logo. By default, the form title and description are aligned to the container width, appear on the left, and are rendered one after the other. The form logo can appear on either the left or right side. For basic headers, users can adjust the font and text size for the title and description.
If the design requires a more complex layout for the form header, such as a background image, different header text sizes, or alternative locations for the title and description, enable the advanced header view.
The advanced header view allows designers to align the title, description, and logo in horizontal and vertical directions, change the text size and font for the title and description, and define a header background color or image. With advanced header view, a form designer can also specify the header width and stretch the header to the full container width.
The following image shows the header content aligned with the actual form content:
The following demo shows the header content stretched across the entire form width:
Another cool feature of the advanced header view is that the bottom part of the header can extend beneath the top of the form:
Responsiveness is fully supported out of the box—your form easily adapts to any screen size:
Toolbar Actions
The Theme Editor includes a toolbar that contains the following actions:
Undo/Redo
Reverts/re-applies the latest user action.Reset Theme
Discards all user modifications made to the originally selected theme.Import/Export Theme
Loads a theme JSON definition into Theme Editor for further customization or saves the current theme JSON definition to a file.
Live Demos
Each SurveyJS Form Library demo includes a theme selector where you can choose from different predefined themes. For examples of advanced theme customization, take a look at Featured Demos.
Read More
For more information on how to customize the appearance of SurveyJS forms and explore the Theme Editor, please visit our developer documentation: