Manage Theme Settings

Edit in →

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 with type: "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:

  1. 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.

    View Source Code

  2. Hide the default "Title font" setting.

    Serializer.getProperty("theme", "questionTitle").visible = false;
    
  3. 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.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.