Theme Customization

Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

This example shows how to create a custom theme for your survey. SurveyJS styles rely on CSS variables that specify element colors and sizes. In this demo, you can use controls in the Settings panel to change these variables.

Select a color scheme to start with (Light or Dark), enter a base unit number to resize survey elements, and select main colors to use in your custom theme. If you want to restore initial variable values, click Reset to Initial Configuration.

After you finish configuration, follow the steps below to apply the custom appearance settings to your application:

  1. Click the Copy Variables button to copy the CSS variables to the clipboard.
  2. Paste the copied variables into a CSS rule that applies to the survey container.
    /* Option 1: Apply styles to an element with id="surveyElement" */
    #surveyElement {
      /* Paste variables here */
    }
    /* Option 2: Apply styles to <body> */
    body {
      /* Paste variables here */
    }
    
  3. Rebuild your application.

This demo shows how to customize only a part of available CSS variables. For a full list of variables in the Default V2 theme, refer to the source code on GitHub: variables.scss.

Settings

Color scheme:

--base-unit

--primary

--background

--background-dim

--background-dim-light

--foreground

--primary-foreground

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.