---
title: Add Reusable Custom Themes
product: Survey Creator
description: Theme Editor is a form styling tool integrated into SurveyJS Form Builder, enabling form creators to add custom themes and store them in a shared repository for collaborative use. With Theme Editor, designers can easily create custom themes and save them for future reuse. Try out a live demo for JavaScript with a step-by-step guide on how to create and manage custom themes in SurveyJS Form Builder.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/save-custom-theme/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Add Reusable Custom Themes (Vanilla JS)
Theme Editor is a powerful form styling tool fully integrated into Survey Creator. It enables form creators to add and manage reusable custom themes using a set of UI controls. Once saved in a shared repository, themes become available for collaborative use, ensuring consistency of design across various departments within an organization. In this example, users can utilize the intuitive interface of the Theme Editor to capture the current theme configuration as a custom theme by clicking the "Add custom theme to the list" toolbar button. The "Delete theme" button allows users to remove unwanted custom themes.
## Themes in SurveyJS
A SurveyJS theme is a JSON object that specifies CSS variables and other theme settings, such as the color palette (light or dark), question appearance with or without question boxes, and survey header settings. SurveyJS includes several [predefined themes](/documentation/themes-and-custom-styles#predefined-themes) and allows you to add custom themes.
## Add a Custom Theme
Theme Editor displays a list of available themes within the Theme drop-down menu. To add a custom theme to this menu, follow the steps below:
1. [Specify a theme JSON schema](#specify-a-theme-json-schema).
2. [Add a custom theme to the list of available themes](#add-a-custom-theme-to-the-list-of-available-themes).
3. [Apply the custom theme at application startup](#apply-the-custom-theme-at-application-startup).
### Specify a theme JSON schema
Declare a JSON object that defines a custom theme. Within this object, specify a unique [`themeName`](https://surveyjs.io/form-library/documentation/api-reference/itheme#themeName) property:
```js
// theme_json.js
export const customTheme = {
"backgroundImage": "",
"backgroundImageFit": "cover",
"backgroundImageAttachment": "scroll",
"backgroundOpacity": 1,
"cssVariables": {
//...
},
"headerView": "advanced",
"header": {
//...
},
"themeName": "custom",
"colorPalette": "light",
"isPanelless": true
};
```
If you want to create a theme with dark/light color variations, define two JSON objects that differ only in the [`colorPalette`](https://surveyjs.io/form-library/documentation/api-reference/itheme#colorPalette) property:
```js
// theme_variations.js
const lightTheme = {
"themeName": "custom-with-color-variations",
"colorPalette": "light",
// ...
// Other properties are the same as `darkTheme` object properties
// ...
};
const darkTheme = {
"themeName": "custom-with-color-variations",
"colorPalette": "dark",
// ...
// Other properties are the same as `lightTheme` object properties
// ...
};
```
Similarly, you can create a theme with visible/invisible question boxes by setting different [`isPanelless`](https://surveyjs.io/form-library/documentation/api-reference/itheme#isPanelless) property values:
```js
const panellessTheme = {
"themeName": "custom-with-question-box-variations",
"isPanelless": true,
// ...
// Other properties are the same as `themeWithPanels` object properties
// ...
};
const themeWithPanels = {
"themeName": "custom-with-question-box-variations",
"isPanelless": false,
// ...
// Other properties are the same as `panellessTheme` object properties
// ...
};
```
### Add a custom theme to the list of available themes
Access a [`ThemeTabPlugin`](https://surveyjs.io/survey-creator/documentation/api-reference/themetabplugin) using Survey Creator's [`themeEditor`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#themeEditor) property. Call the plugin's [`addTheme()`](https://surveyjs.io/survey-creator/documentation/api-reference/themetabplugin#addTheme) method and pass a theme JSON schema to it. If you have theme variations, call this method once for each variation. The variations will be collected into one entry in the theme list.
```js
import { customTheme } from "./theme_json";
import { lightTheme, darkTheme } from "./theme_variations";
// ...
const themeTabPlugin = creator.themeEditor;
themeTabPlugin.addTheme(customTheme);
themeTabPlugin.addTheme(lightTheme);
themeTabPlugin.addTheme(darkTheme);
```
For a more user-friendly interface, specify a theme title that will be displayed in the theme list. Use [Survey Creator's localization capabilities](https://surveyjs.io/survey-creator/documentation/survey-localization-translate-surveys-to-different-languages#override-individual-translations) to do this:
```js
import { getLocaleStrings } from "survey-creator-core";
const enLocale = getLocaleStrings("en");
enLocale.theme.names[theme.themeName] = "Custom Theme";
```
### Apply a custom theme to a survey being designed
Assign the theme JSON schema to Survey Creator's [`theme`](/survey-creator/documentation/api-reference/survey-creator#theme) property:
```js
creator.theme = customTheme;
```
## Save a Theme
To let users save current theme modifications as a new theme, add an [action button](https://surveyjs.io/form-library/documentation/api-reference/iaction) to the toolbar. This button should call a function that obtains a JSON object with the current theme, saves it to a required storage, and updates the theme list in Theme Editor:
```js
import { Action } from "survey-core";
// ...
function saveCustomTheme() {
// Get the current theme
const currentTheme = creator.theme;
// ...
// Save the theme to a custom storage
// ...
// Update the theme list using the `ThemeTabPlugin` API
// ...
// Refer to the Code tab for a full code listing
};
const saveThemeAction = new Action({
id: "svd-save-custom-theme",
tooltip: "Add custom theme to the list",
action: saveCustomTheme,
iconName: "icon-saveas"
});
creator.toolbar.actions.push(saveThemeAction);
```
## Delete a Theme
To implement a UI for theme deletion, add another toolbar action. Use `ThemeTabPlugin`'s [`removeTheme()`](https://surveyjs.io/survey-creator/documentation/api-reference/themetabplugin#removeTheme) method to update the theme list:
```js
import { Action } from "survey-core";
// ...
function deleteCurrentCustomTheme() {
// Get the current theme
const currentTheme = creator.theme;
// ...
// Remove the theme from a custom storage
// ...
// Update the theme list using the `ThemeTabPlugin` API
// ...
// Refer to the Code tab for a full code listing
};
const deleteThemeAction = new Action({
id: "svd-delete-custom-theme",
tooltip: "Delete theme",
action: deleteCurrentCustomTheme,
iconName: "icon-delete"
});
creator.toolbar.actions.push(deleteThemeAction);
```
In this demo, the "Delete theme" toolbar action is available only for custom themes.
## Files
### `public/index.html`
```html
```
### `src/index.css`
```css
.my-dialog .sd-root-modern {
background-color: transparent;
}
.my-dialog .sv-popup__body-header {
color: var(--sjs2-color-component-input-default-value, var(--sjs2-color-fg-basic-primary, rgba(0, 0, 0, 0.91)));
margin-bottom: 0;
font-family: var(--sjs2-typography-font-family-text);
font-size: var(--sjs2-typography-font-size-default, 16px);
font-style: normal;
font-weight: var(--sjs2-typography-font-weight-basic, 400);
line-height: var(--sjs2-typography-line-height-default, 24px);
}
.my-dialog .sv-components-row > .sv-components-column--expandable {
width: auto;
padding-bottom: var(--sjs2-spacing-x025, 2px);
}
```
### `src/survey_json.js`
```js
export const formJSON = {
"title": "Online Check-in",
"description": "Check-in is available 2 to 24 hours prior to departure for all destinations. To complete the check-in process, please fill out the form below.",
"logo": "https://api.surveyjs.io/private/Surveys/files?name=ee96dc76-ecfb-4b17-8589-493015f1132a",
"logoWidth": "auto",
"logoHeight": "40",
"completedHtml": "
\n\n
\n
Check-in complete.
\n
Thank you for checking in. Your journey with us is all set. Have a great flight.