Themes
All SurveyJS products—Form Library, Survey Creator, Dashboard, and PDF Generator—support the same predefined themes and appearance customization system based on CSS variables and theme JSON objects.
This help topic explains how to apply SurveyJS themes in Angular, Vue, React, jQuery, or Vanilla JS applications, switch between themes, and create custom themes.
Predefined Themes
SurveyJS ships with a collection of predefined UI themes illustrated below. Each theme supports dark mode and a more compact panelless layout (without question containers), which gives you a total of 32 theme variations out of the box.
A SurveyJS theme is a JSON object that specifies CSS variables and other appearance settings. You can find JSON definitions for all predefined themes and their variations in the following GitHub repository: survey-core/themes.
Apply a Predefined Theme
The Default Light theme is applied automatically when you reference or import a SurveyJS stylesheet during component setup. All other themes override specific CSS variables in the Default Light theme to change the component appearance.
To apply a predefined theme in a modular application, import the theme object and pass it to the applyTheme method.
The following example applies the Flat Dark Panelless theme to a survey. The same API is available in Survey Creator, Dashboard, and PDF Generator. Note that applyTheme on a Survey Creator instance applies the theme to the survey being configured in Survey Creator. To apply a theme to the Survey Creator UI itself, call the applyCreatorTheme method.
// Modular applications
import { FlatDarkPanelless } from "survey-core/themes";
const survey = new Model({ /* ... */ });
survey.applyTheme(FlatDarkPanelless);
const creator = new SurveyCreatorModel({ /* ... */ });
creator.applyCreatorTheme(FlatDarkPanelless); // Apply to Survey Creator UI
creator.applyTheme(FlatDarkPanelless); // Apply to the survey being configured
const dashboard = new Dashboard({ /* ... */ });
dashboard.applyTheme(FlatDarkPanelless);
const surveyPdf = new SurveyPDF({ /* ... */ });
surveyPdf.applyTheme(FlatDarkPanelless);
<!-- Classic script applications -->
<head>
<!-- ... -->
<script type="text/javascript" src="https://unpkg.com/survey-core/themes/flat-dark-panelless.min.js"></script>
<!-- ... -->
</head>
<body>
<script>
const survey = new Survey.Model({ /* ... */ });
survey.applyTheme(SurveyTheme.FlatDarkPanelless);
const creator = new SurveyCreator.SurveyCreator({ /* ... */ });
creator.applyCreatorTheme(SurveyTheme.FlatDarkPanelless); // Apply to Survey Creator UI
creator.applyTheme(SurveyTheme.FlatDarkPanelless); // Apply to the survey being configured
const dashboard = new SurveyAnalytics.Dashboard({ /* ... */ });
dashboard.applyTheme(SurveyTheme.FlatDarkPanelless);
const surveyPdf = new SurveyPDF.SurveyPDF({ /* ... */});
surveyPdf.applyTheme(SurveyTheme.FlatDarkPanelless);
</script>
</body>
Custom Themes
Create a Custom Theme
SurveyJS themes use CSS variables to define colors, typography, spacing, borders, shadows, and other appearance settings. You can customize these variables in one of the following ways:
Use Theme Editor
Theme Editor is a visual theme designer with a user-friendly interface. It is integrated into Survey Creator and allows you to create and customize themes without editing code manually.
You can create a custom theme for your survey using the online Theme Editor in our all-in-one demo. Open the demo, switch to the Themes tab, and configure theme settings using UI controls.
Once you finish customization, click the Export button to download a JSON object with CSS variables and other theme settings:
If you plan to create custom themes regularly, integrate Survey Creator into your application and enable the Theme Editor tab. Refer to the following help topic for implementation instructions:
Customize CSS Variables Manually
If you do not want to use Theme Editor, you can copy a predefined theme object and modify its CSS variables manually.
This approach provides maximum flexibility, but requires understanding of how SurveyJS design tokens and CSS variables work. Refer to the following help topic for more information:
Design Tokens — CSS-Based Customization
Apply a Custom Theme
To apply a custom theme, pass its JSON object to the applyTheme or applyCreatorTheme method:
const customTheme = {
"cssVariables": {
// ...
},
"themeName": "doubleborder",
"colorPalette": "dark",
"isPanelless": true
};
survey.applyTheme(customTheme);
creator.applyCreatorTheme(customTheme); // Apply to Survey Creator UI
creator.applyTheme(customTheme); // Apply to the survey being configured
dashboard.applyTheme(customTheme);
surveyPdf.applyTheme(customTheme);
Switch Between Themes
To support multiple SurveyJS themes in your application, import them or reference their scripts and call the applyTheme method to switch between themes at runtime.
The following example imports the predefined Contrast Dark and Contrast Light themes and applies the latter. Although the example demonstrates Form Library, the same API is available in Survey Creator, Dashboard, and PDF Generator.
// Modular applications
import { ContrastDark, ContrastLight } from "survey-core/themes";
// ...
survey.applyTheme(ContrastLight);
<!-- Classic script applications -->
<head>
<!-- ... -->
<script type="text/javascript" src="https://unpkg.com/survey-core/themes/contrast-dark.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-core/themes/contrast-light.min.js"></script>
<!-- ... -->
</head>
<body>
<script>
// ...
survey.applyTheme(SurveyTheme.ContrastLight);
</script>
</body>
Send feedback to the SurveyJS team
Need help? Visit our support page