Dynamic Theme Images

Images added to a Theme can only be added to Web Pages if their Form is configured to use that Theme. See Developing with Themes for more information about this configuration.

When adding an Image Control to a Web Page, its image can be selected from the currently configured Theme. Images configured in this way have URLs that start with $theme.

Now when the Web Page is rendered to an end-user, the it uses the image from its Form’s current Theme. If the end-user switches to a different Theme, the image is automatically served from the new Theme. This allows images with more appropriate colours to be used in different Themes, maintaining the consistency of the application’s styling.

Theme images must have the same path and filename in both the current Theme and the new Theme for this feature to work.

Steps

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

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

Click File > Switch Workspace.
Select verjioTutorials
Click OK.

Add a different image to the dark and light Themes.

Right-click on the dark Theme in the shared Project and select New > Folder.
Name the Folder images.
Add an image to the dark Theme's images Folder by dragging it from your filesystem into the images Folder.
Rename the image image1. Leave the image extension as it was, so an image called verjio.png would be renamed image1.png.
Right-click on the light Theme in the shared Project and select New > Folder.
Name the Folder images.
Add a different image to the light Theme's images Folder by dragging it from your filesystem into the images Folder.
Rename the image image1. Leave the image extension as it was, so an image called verjio.png would be renamed image1.png. It is important that the names (including their extensions) of these added images are the same in both the dark and light Themes.

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

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

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

Create a main section for Page_1 in the dynamicThemeImages 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 Dynamic Theme Images in the Create New Control dialog.
Add a Image underneath the Heading, change to the Theme tab in the Configure Web Resource dialog, select image1.png and click OK.
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 main 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 and the image will be automatically be replaced with the image from the dark Theme.