Add Reusable Custom Themes

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.

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 and allows you to add custom themes.

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.
2. Add a custom theme to the list of available themes.
3. Apply the custom theme at application startup.

Declare a JSON object that defines a custom theme. Within this object, specify a unique themeName property:

// 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 property:

// 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 property values:

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
  // ...
};

Access a ThemeTabPlugin using Survey Creator's themeEditor property. Call the plugin's 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.

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 to do this:

import { editorLocalization } from "survey-creator-core";

const enLocale = editorLocalization.getLocale("en");
enLocale.theme.names[theme.themeName] = "Custom Theme";

Assign the theme JSON schema to Survey Creator's theme property:

creator.theme = customTheme;

To let users save current theme modifications as a new theme, add an action button 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:

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",
  title: "Save Theme",
  action: saveCustomTheme,
  iconName: "icon-saveas",
  showTitle: false
});
creator.toolbar.actions.push(saveThemeAction);

To implement a UI for theme deletion, add another toolbar action. Use ThemeTabPlugin's removeTheme() method to update the theme list:

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",
  title: "Delete Theme",
  action: deleteCurrentCustomTheme,
  iconName: "icon-delete",
  showTitle: false
});
creator.toolbar.actions.push(deleteThemeAction);

In this demo, the "Delete theme" toolbar action is available only for custom themes.