hub.eb?material_id=757&track_id=281
Login
Back

Programmatically Switching Themes

The JavaScript API projects, project and form interfaces have functions that allow a different Theme to be used:

  • projects.setTheme("myDarkTheme") all Projects switch to use myDarkTheme.
  • project.myProject.setTheme("myDarkTheme") myProject switches to use myDarkTheme.
  • form.myForm.setTheme("myDarkTheme") myForm switches to use myDarkTheme.

Using one of these functions inside a Button Control's On Click event, will change the Theme of the entire application, a part of the application, or a single Form, when the end-user clicks the button in the browser.

Steps

1

Create a Project. Name the Project myProject, click Next >>, and select the Bootstrap 5 > Corporate > 2-Colour > Verj.io Light Theme.

The Theme will be downloaded into myProject and called corporate2ColourVerjioLight.

2

Create a Theme in myProject and select the Bootstrap 5 > Corporate > 2-Colour > Verj.io Dark Theme.

The downloaded Theme will be called corporate2ColourVerjioDark.

3

Set myProject's Theme to corporate2ColourVerjioLight.

4

Add a Button Control to the Page with the text Switch Theme.

5

Right-click on the Button Control, select Events and press the New Script button.

Name the Script switchTheme and click OK.

Add the following code to switchTheme:

projects.myProject.setTheme("corporate2ColourVerjioDark");

Save  the Script.

6

Run the Form and press the button. The look of the page will change.

Previous PageNext Page

Current Module

Themes
view
Introducing Themes
view
Property Sets
view
Web Resource Inheritance
view
Programmatically Switching Themes
Presentation Templates
view

Related

Presentation Templates
view
Property Sets
view
Web Resource Inheritance
view
Dynamic Theme Images
view
Light and Dark Themes
view
Previous PageNext Page