Documentation Docs
Documentation Docs

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";

Theme Editor Documentation

addTheme method

Adds a new UI theme to Theme Editor.

Type:
(theme: ITheme, setAsDefault?: boolean) => string
Parameters:
theme, type: ITheme ,

A UI theme to add.

setAsDefault, type: boolean ,

For internal use.

Return Value:

An identifier of the added theme, which is a concatenation of the themeName, colorPalette, and isPanelless settings (for example, "default-dark-panelless").

Implemented in:
ThemeTabPlugin
See also:
removeTheme * , getCurrentTheme
availableThemes property

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 true to 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
isModified property

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
    A ThemeTabPlugin instance that raised the event.
  • options.theme: ITheme
    The current theme.
  • options.allow: boolean
    A Boolean property that you can set to false if 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
    A ThemeTabPlugin instance 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
    A ThemeTabPlugin instance that raised the event.
  • options.theme: ITheme
    A selected theme.
Type:
EventBase<ThemeTabPlugin, { theme: ITheme; }>
Implemented in:
ThemeTabPlugin
See also:
availableThemes * , addTheme * , removeTheme
removeTheme method

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, and isPanelless settings (for example, "default-dark-panelless").

includeModifications, type: boolean ,

Pass true to delete not only the specified UI theme, but also all other themes with the same themeName value (dark/light and panelless modifications).

Implemented in:
ThemeTabPlugin
See also:
addTheme * , getCurrentTheme
saveThemeFunc property

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.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.