Back

Switching Themes

Ideally an application has a consistent look and feel in a browser, which means all its web pages follow the same style and branding rules as each other. To help with this, the Developing with Themes tutorial demonstrates how to configure your Verj.io Studio so that all new Forms use the same Theme.

Reusing the same Theme in this way also makes it easy to change the look of the entire application by reconfiguring the Theme, or by swapping in a different Theme entirely. This is true at both design time, for example to change the application’s colour palette, and at runtime by offering different style options to end-users, for example, a light or dark mode.

Changing to a different theme at runtime requires a simple server event to be executed when an end-user clicks on a button, for example.

All Forms configured to use their owning Project’s Theme can be dynamically updated to use a different Theme, using the Verj.io JavaScript API function projects.setTheme(path_to_theme).

For this to work as expected, all Projects should to be linked to the new Theme’s owning Project. It is therefore recommended that all Themes are in the same Project as each other.

Web Pages are styled using Property Sets. It is important that the new Theme has the same collection of Property Sets as the old Theme, otherwise some aspects of your Web Pages may no longer render as expected.

Steps

Step number

If you haven't already, complete the Steps in the Developing with Themes Tutorial before starting these Steps.

Switch to your verjioTutorials Workspace if you haven’t already:

Click File > Switch Workspace.
Select verjioTutorials
Click OK.

Download a dark Theme into the themes Folder in the shared Project:

Right click on the themes Folder in the shared Project and select New > Theme.
Select the Boostrap 5 > Corporate > 2-Colour > Verj.io Dark Theme.
Name the Theme dark.
Click OK

At this point your shared Project should look like this in the Entity Tree:

Create a new Form called switchingThemes in a switchingThemes Folder in the themeBasics Project:

Right-click on the themeBasics Project and select New > Folder.
Name the Folder switchingThemes.
Right-click on the switchingThemes Folder and select New > Form.
Name the Form switchingThemes.

At this point your themeBasics Project should look like this in the Entity Tree:

Create a main section for Page_1 in the switchingThemes Form:

Select Page_1 from the Pages View.
Add a Main by dragging it from the Palette into the Outline View as a child of the Page_1 Page Control.
Add a Bootstrap Container as a child of the Main.
Add a Heading as a child of the Main Bootstrap Container and write Switching Themes in the Create New Control dialog.
Add a Button underneath the Heading and write Switch Theme in the Create New Control dialog.

At this point, your Outline view should look like this:

Switch the Theme when the Switch Theme Button is clicked:

Click on the Switch Theme Button Control to select it.
In the Properties View click on the On Click property button.
In the resulting Configure dialog, click Create New Script and name it switchTheme.

In the new script paste the following code:

// Switch the Theme used by all Projects to the dark Theme.
projects.setTheme("themes/dark");

Save the script.

Test the Form in your browser:

Press the Save All button in the main toolbar.
Click the Test button in the mai§1n toolbar and press Submit in the resulting dialog.
Click the Switch Theme button. The page will now be presented using the dark Theme's styling.

More samples, tutorials and demos