Add a Custom Survey Creator Theme

Survey Creator UI themes allow users to quickly adjust the appearance of the tool. Four predefined UI themes are included out of the box: Light, Dark, Contrast, and a classic Survey Creator 2020 theme. This example demonstrates how to create and apply a custom UI theme to Survey Creator.

Follow the steps below to add a custom Survey Creator theme:

1. Define a theme object.
   This object must include a unique theme identifier and a nested object with CSS variables. A theme is defined by many CSS variables, but you may specify only the variables that you want to override in the Light theme.

2. Specify a localized user-friendly theme name.
   This name will be displayed in the drop-down theme list. Use Survey Creator's localization capabilities for this.

3. Register the custom theme.
   Pass the theme object to the registerCustomTheme(theme) method. This is a static method that you can import form the survey-creator-core module or access via the SurveyCreatorCore object.

4. Apply the custom theme to Survey Creator.
   Pass the theme object to SurveyCreatorModel's applyCreatorTheme(theme) method.

Refer to the Code tab for a code example.