Documentation Docs
Documentation Docs

Themes & Styles

This help topic describes how to add SurveyJS themes to your Angular, Vue, React, Knockout, or jQuery application and switch between them if you want to allow users to change the active theme.

Add SurveyJS Themes to Your Application

SurveyJS ships with the Modern and Default V2 UI themes illustrated below.

Themes in SurveyJS Form Library

Themes are added differently depending on your framework. Refer to the following sections within Get Started help topics for instructions:

Customize Themes

Colors and Sizes

SurveyJS themes use CSS variables to specify colors and sizes. You can find a full list of CSS variables for the Default V2 theme in the following file on GitHub: variables.scss. To customize a theme, change variable values and rebuild your application.

View Demo

Custom CSS Classes

If you want to apply custom CSS classes to all survey elements of a specific type, define a JavaScript object in which keys specify survey elements and values specify CSS classes. For information on the object structure, refer to the following file on GitHub: defaultV2Css.ts. Assign this object to SurveyModel's css property.

View Demo

In addition, the SurveyModel object raises events that allow you to override CSS classes for individual questions, panels, pages, and choice items. Refer to the following event descriptions in the API reference for more information:

View Demo

Switch Between Themes

If you add more than one SurveyJS theme to your application, call the applyTheme(themeName) method to specify an active theme. Pass one of the following theme names as the method's argument:

  • "defaultV2"
  • "modern"

The following theme names are also supported, but they are obsolete:

  • "default"
  • "orange"
  • "darkblue"
  • "darkrose"
  • "stone"
  • "winter"
  • "winterstone"

The code example below shows how to apply the Default V2 theme:

import { StylesManager } from 'survey-core';

StylesManager.applyTheme("defaultV2");

Previously, you needed to call the applyTheme(themeName) method even if your application includes only one SurveyJS theme. Since v1.9.69, a theme applies automatically if it is the only SurveyJS theme in the application.

Bootstrap Support (Obsolete)

SurveyJS includes themes designed for use with Bootstrap and Bootstrap Material. However, they are obsolete and no longer receive updates.

Previously, Bootstrap integrations were part of the main package. Since v1.9.69, they are shipped as separate modules/scripts. The following code shows how to apply the Bootstrap or Bootstrap Material theme by importing a module:

// Apply the Bootstrap theme
import { bootstrapThemeName } from "survey-core/plugins/bootstrap-integration";
import { StylesManager } from 'survey-core';

StylesManager.applyTheme(bootstrapThemeName);
// Apply the Bootstrap Material theme
import { bootstrapMaterialThemeName } from "survey-core/plugins/bootstrap-material-integration";
import { StylesManager } from 'survey-core';

StylesManager.applyTheme(bootstrapMaterialThemeName);

The code below shows how to apply the themes by referencing a script:

<!-- Apply the Bootstrap theme -->
<script src="https://unpkg.com/survey-core/plugins/bootstrap-integration.min.js"></script>
Survey.StylesManager.applyTheme("bootstrap");
<!-- Apply the Bootstrap Material theme -->
<script src="https://unpkg.com/survey-core/plugins/bootstrap-material-integration.min.js"></script>
Survey.StylesManager.applyTheme("bootstrapmaterial");

Bootstrap theme customization in code has also changed. Objects that specify applied CSS classes have been moved to the integration modules/scripts mentioned above.

Previously:

// Assign another CSS class in Bootstrap (obsolete approach)
Survey.defaultBootstrapCss.page.description = "sv_page_description";

// In modular applications
import { defaultBootstrapCss } from "survey-core";

defaultBootstrapCss.page.description = "sv_page_description";
// Assign another CSS class in Bootstrap Material (obsolete approach)
Survey.defaultBootstrapMaterialCss.page.description = "sv_page_description";

// In modular applications
import { defaultBootstrapMaterialCss } from "survey-core";

defaultBootstrapMaterialCss.page.description = "sv_page_description";

Since v1.9.69:

// Assign another CSS class in Bootstrap (relevant approach)
SurveyBootstrap.defaultCss.page.description = "sv_page_description";

// In modular applications
import { defaultCss } from "survey-core/plugins/bootstrap-integration";

defaultCss.page.description = "sv_page_description";
// Assign another CSS class in Bootstrap Material (relevant approach)
SurveyBootstrapMaterial.defaultCss.page.description = "sv_page_description";

// In modular applications
import { defaultCss } from "survey-core/plugins/bootstrap-material-integration";

defaultCss.page.description = "sv_page_description";

See Also

Copyright © 2023 Devsoft Baltic OÜ. All rights reserved.

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.

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.