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";
Properties
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 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 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 © 2024 Devsoft Baltic OÜ. All rights reserved.