Developing with Themes

Themes are important entities in Verj.io that define the look of your application.

Forms in a Project can be styled consistently by configuring a Project Theme and setting the Forms to inherit it.

To set a Theme for a Project, right-click on the Project in the Entity Tree and click Properties.

Clicking on the Theme properties … button enables you to select any Theme from this or any Linked Project as this Project's Theme.

A Form can use its owning Project’s Theme by opening the its Form Properties dialog and selecting the Project Theme option in the Presentation tab.

If the Project is updated to use a different Theme, then the Form will automatically switch to use the new Theme.

Workspace Preferences

The Workspace Preferences dialog can be opened by selecting File > Workspace Preferences from the main menu.

Any Theme in the Workspace can be set as the Theme for all new Projects by setting the Theme property.

The selected Theme can be from any Project in the Workspace. When a new Project is created this Theme is automatically configured to be its Theme, and a link to the Theme’s owning Project is automatically created in the new Project.

New Forms created in the Workspace will automatically be configured to use their owning Project’s Theme if the Use Project Theme property is checked.

Using these Workspace preferences means every time you create a Project or a Form it uses the same Theme as the rest of your application.

Using Themes in this way makes an application’s styling consistent, both in terms of the rendered web page but also in terms of developing them. Additionally, it means that changes to that Theme (for example a change in colour) will automatically be applied to all Web Pages in your application.

It also makes it much easier to offer an end-user the ability to switch the current Theme, for example between a light and dark mode.

Workspace Preferences are specific to the current Workspace, so if you switch to a new Workspace a different Theme can be configured.

Steps

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

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

Click File > Switch Workspace.
Select verjioTutorials
Click OK.

Create a new Project called shared, if it doesn't already exist:

Click New .
Select Project.
Name your project shared
Click Finished.

Download a Theme into a themes Folder in this Project:

Right-click on the shared Project and select New > Folder.
Name the Folder themes.
Right click on the the themes Folder and select New > Theme.
Select the Boostrap 5 > Corporate > 2-Colour > Verj.io Light.
Name the Theme light.
Check Set as current Project's Theme.
Check Set as Theme for New Projects.
Click OK

At this point your Entity Tree should look like this:

Configure new Projects to use the light Theme by default and make all new Forms use their owning Project's Theme.

Open the Workspace Preferences dialog by pressing File > Workspace Preferences in the main menu.
Click on the ... button next the New Projects Theme property.
Select the light Theme from the shared Project.
Make sure the New Forms Use Project Theme property is checked.

Your Workspace Preferences should look like this:
Click OK.

Create a new Project called themeBasics, if it doesn't already exist:

Click New .
Select Project.
Name your project themeBasics
Click Finished.
Right-click on the themeBasics Project and select Properties.

The Project Properties dialog should look like this, with light set as the Theme and shared added as a member of Linked Projects:
Click OK if you have made changes, otherwise Cancel.

Create a new Form called developingWithThemes in a developingWithThemes Folder in this Project:

Right-click on the themeBasics Project and select New > Folder.
Name the Folder developingWithThemes.
Right-click on the developingWithThemes Folder and select New > Form.
Name the Form developingWithThemes.
Click OK.
Click on the Form Properties button on the developingWithThemes Form's toolbar.
Click on the Presentation tab and notice the Theme property is set to Project.

It should look like this:

Create a main section for Page_1:

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 Developing With Themes in the Create New Control dialog.
Add a Button underneath the Heading and write Test Button in the Create New Control dialog.

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

Check to see the Button Control is getting its styling from the light Theme:

Click on the Button Control in the Outline View.
Look at the Property Set property in the Button Control's Properties View.
Click on <Default>. This will open the Presentation Template from the light Theme, showing the default Property Set for the Button Control. See Presentation Template Basics and Property Set Basics for more information.

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.
The page will be presented using the light Theme's styling.