ThemeTabPlugin
An object that enables you to modify, add, and remove UI themes and handle theme-related events. To access this object, use the themeEditor property on a Survey Creator instance:
const creatorOptions = { ... };
const creator = new SurveyCreator.SurveyCreator(creatorOptions);
creator.themeEditor.settingName = "value";
// In modular applications:
import { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = { ... };
const creator = new SurveyCreatorModel(creatorOptions);
creator.themeEditor.settingName = "value";
        Methods
Adds a new UI theme to Theme Editor.
- Type:
 - (theme: ITheme, setAsDefault?: boolean) => string
 
- Parameters:
 - 
                
                setAsDefault, type: boolean ,
For internal use.
 
- Return Value:
 - 
            
An identifier of the added theme, which is a concatenation of the
themeName,colorPalette, andisPanellesssettings (for example,"default-dark-panelless"). 
- Implemented in:
 - ThemeTabPlugin
 
- See also:
 - removeTheme * , getCurrentTheme
 
A Boolean value that indicates or specifies whether the Appearance category displays advanced settings.
Default value: false
- Type:
 - boolean writable
 
- Implemented in:
 - ThemeTabPlugin
 
A list of UI themes from which users can select. You can sort this list if you want to reorder themes in Theme Editor.
- Type:
 - {} writable
 
- Implemented in:
 - ThemeTabPlugin
 
- See also:
 - addTheme * , removeTheme
 
Returns a JSON object that describes the currently applied UI theme.
- Type:
 - (changesOnly?: boolean) => ITheme
 
- Parameters:
 - 
                changesOnly, type: boolean ,
Pass
trueto get a JSON object that contains only changed theme settings instead of a full theme JSON schema. 
- Return Value:
 - 
            
A currently applied theme JSON schema.
 
- Implemented in:
 - ThemeTabPlugin
 
- See also:
 - availableThemes * , addTheme * , removeTheme
 
Indicates whether the selected theme has been modified.
- Type:
 - boolean readonly
 
- Implemented in:
 - ThemeTabPlugin
 
- See also:
 - `creator.saveTheme()` , `creator.saveThemeFunc`
 
An event that you can use to switch the current theme to read-only mode.
Parameters:
sender:ThemeTabPlugin
AThemeTabPlugininstance that raised the event.options.theme:ITheme
The current theme.options.allow:boolean
A Boolean property that you can set tofalseif you want to disallow theme modifications.
- Type:
 - EventBase<ThemeTabPlugin, { theme: ITheme; allow: boolean; }>
 
- Implemented in:
 - ThemeTabPlugin
 
An event that is raised when the value of a property or CSS variable in a theme JSON schema has changed.
Parameters:
sender:ThemeTabPlugin
AThemeTabPlugininstance that raised the event.options.name:string
The name of the changed property or CSS variable.options.value:any
A new value of the property or CSS variable.
- Type:
 - EventBase<ThemeTabPlugin, { name: string; value: any; }>
 
- Implemented in:
 - ThemeTabPlugin
 
An event that is raised when users select a UI theme from a drop-down list, choose a dark or light color palette, and switch between regular and panelless theme modifications.
Parameters:
sender:ThemeTabPlugin
AThemeTabPlugininstance that raised the event.options.theme:ITheme
A selected theme.
- Type:
 - EventBase<ThemeTabPlugin, { theme: ITheme; }>
 
- Implemented in:
 - ThemeTabPlugin
 
- See also:
 - availableThemes * , addTheme * , removeTheme
 
Removes a UI theme from Theme Editor.
- Type:
 - (themeAccessor: string | ITheme, includeModifications?: boolean) => void
 
- Parameters:
 - 
                themeAccessor, type: string | ITheme ,
A UI theme to delete or a theme identifier, which is a concatenation of the
themeName,colorPalette, andisPanellesssettings (for example,"default-dark-panelless").includeModifications, type: boolean ,Pass
trueto delete not only the specified UI theme, but also all other themes with the samethemeNamevalue (dark/light and panelless modifications). 
- Implemented in:
 - ThemeTabPlugin
 
- See also:
 - addTheme * , getCurrentTheme
 
A function that is called each time users click the Save button or auto-save is triggered to save a theme JSON object.
For more information, refer to the Save and Load Custom Themes help topic.
- Type:
 - any writable
 
- Implemented in:
 - ThemeTabPlugin
 
Copyright © 2025 Devsoft Baltic OÜ. All rights reserved.