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:

Click the Copy Variables button to copy the CSS variables to the clipboard.

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 */
}

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

Theme Customization

Why we use cookies.