Manage Theme Settings
SurveyJS Form Builder comes with a fully integrated Theme Editor. This styling tool enables form designers to create distinctive looks for their forms using a set of property editors. Internally, these editors modify SCSS variables. This demo shows how you can add custom property editors and hide unwanted editors from the Property Grid of the Theme Editor.
Theme Editor's Property Grid is built upon a regular survey from the SurveyJS Form Library. Therefore, Property Grid customization involves the same techniques that are used to customize surveys, namely adding and modifying properties of two SurveyJS classes: ThemeModel
(implements the ITheme
interface) and HeaderModel
(implements IHeader
). As public SurveyJS classes, they are serialized to JSON (see Serialization and Deserialization for more information). Their serialization rules are registered under the "theme"
and "header"
aliases. To add or remove theme settings, you need to modify the JSON properties of these classes using the Serializer
API as described below.
Hide Settings from the Property Grid
To hide a specific theme or header setting from the Property Grid, access the corresponding JSON property using the Serializer
's getProperty(className, propertyName)
method and set its visible
attribute to false
. The following code shows how to hide the "Background image" and related settings for the survey and its header:
import { Serializer } from "survey-core";
Serializer.getProperty("theme", "backgroundImage").visible = false;
Serializer.getProperty("theme", "backgroundImageFit").visible = false;
Serializer.getProperty("theme", "backgroundImageAttachment").visible = false;
Serializer.getProperty("theme", "backgroundOpacity").visible = false;
Serializer.getProperty("header", "backgroundImage").visible = false;
Serializer.getProperty("header", "backgroundImageFit").visible = false;
Serializer.getProperty("header", "backgroundImageOpacity").visible = false;
Serializer.getProperty("header", "overlapEnabled").visible = false;
Add Settings to the Property Grid
To add a custom setting to the Property Grid, add a corresponding property to the theme or header class using the Serializer
's addProperty(className, propMeta)
method. Pass "theme"
or "header"
as the className
parameter and an object with property attributes as the propMeta
parameter. Some of these attributes have specifics when used in Theme Editor:
The
type
attribute supports additional values:type
Property editor(s) Description "coloralpha"
A color picker and an opacity editor Use this type for color values that support alpha channel. The editors produce an RGBA color value. "font"
Editors for font family, weight, color, opacity, and size Use this type for font settings. The editors produce the following object: { family: string, weight: string, size: number, color: string }
"shadoweffects"
Editors for shadow effects Use this type for configuring shadow effects around survey elements. The editors produce a box-shadow
string value.The
category
attribute supports a different set of categories:category
Category title categoryIndex
Description "general"
General -1 - "header"
Header 100 - "background"
Background 200 - "appearance"
Appearance 300 Has subcategories that depend on whether the "Advanced mode" toggle is ON or OFF "appearancecolor"
- 100 Advanced mode is OFF "appearancefont"
- 200 Advanced mode is OFF "appearanceother"
- 300 Advanced mode is OFF "appearanceprimarycolor"
- 400 Advanced mode is ON "appearancepage"
Page 500 Advanced mode is ON "appearancequestion"
Question box 600 Advanced mode is ON "appearanceinput"
Input element 700 Advanced mode is ON "appearancelines"
Lines 800 Advanced mode is ON The
name
attribute value must start with--
, except for settings withtype: "font"
.
This rule exists because most theme settings are directly mapped to SCSS variables, which must begin with--
. However, a setting of the font type is mapped to an object whose fields are mapped to SCSS variables. Names for these font variables are constructed automatically and already include the--
prefix.
This demo shows how to add two settings that customize question title font and matrix column and row title font. These settings are used instead of a "Title font" setting that specifies a single font for all titles. The following instructions describe how to implement this functionality:
Create two settings that customize title fonts separately.
import { Serializer } from "survey-core"; Serializer.addProperty("theme", { name: "custom-question-title", // must start with `--` unless the `type` is `"font"` type: "font", displayName: "Question title font", category: "appearancequestion", default: { family: "Open Sans", weight: "600", size: 16, color: "rgba(0, 0, 0, 0.91)" } }); Serializer.addProperty("theme", { name: "matrix-title", // must start with `--` unless the `type` is `"font"` type: "font", displayName: "Matrix title font", category: "appearancequestion", default: { family: "Open Sans", weight: "600", size: 16, color: "rgba(0, 0, 0, 0.91)" } });
These settings produce SCSS variables whose names are constructed based on the setting name. We will use these variables for styles in step 3.
Hide the default "Title font" setting.
Serializer.getProperty("theme", "questionTitle").visible = false;
Declare styles that apply the new SCSS variables and override the default styles.
.sd-title.sd-element__title { color: var(--sjs-font-custom-question-title-color, var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, #161616))); font-family: var(--sjs-font-custom-question-title-family, var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family)))); font-size: var(--sjs-font-custom-question-title-size, var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))); font-weight: var(--sjs-font-custom-question-title-weight, var(--sjs-font-questiontitle-weight, 600)); } .sd-table__cell--header, .sd-matrix__cell:first-of-type { color: var(--sjs-font-matrix-title-color, var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, #161616))); font-family: var(--sjs-font-matrix-title-family, var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family)))); font-size: var(--sjs-font-matrix-title-size, var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))); font-weight: var(--sjs-font-matrix-title-weight, var(--sjs-font-questiontitle-weight, 600)); }
Refer to the code listings for the full code example.