Using Themes - Applying a Collection of Skins as a Group

Quantum Visualizer provides a default theme that has a set of skins defined for all the widgets within an application. The skins in this theme can be applied to widgets to get a different look and feel for the widgets. Themes are accessed from the Skins tab of the Project Explorer. A drop-down list at the top of the Skins tab indicates the current theme.   When you create a theme, it is created using the default theme as the base. All the skins available in the default theme are copied to the created theme. Quantum Visualizer allows you to add, modify, rename, copy, fork, and delete skins within a theme.

NOTE: Any changes you make to the skins within a theme are limited only to that theme.

Quantum Visualizer provides a set of APIs that allow you to perform different actions with themes. The theme you create using the Quantum Visualizer can only be applied using the kony.theme.setCurrentTheme API. For more information about the APIs related to Theme, see Quantum Visualizer API Reference Guide in Kony Documentation Library.

What are themes and why would I want them?

A theme is a collection of skins. By default, Quantum provides you with skins for all the widgets. If required, you can configure a new set of skins for your company and group them as a theme. Themes can be exported and imported in Quantum Visualizer. Using themes you can apply skins to all the widgets in your application in one single action. For example, if you have configured skins for Button, Form, Label, Segment Widgets based on your company's branding, then you can create a new theme and export the theme. The exported theme can be sent to a designer or developer in your company to maintain consistency while developing the applications.

IMPORTANT: The default Theme and the default skins cannot be modified, deleted, or renamed.

If you attempt to modify a default skin it results in creating a new skin. These new skins can be used within the same project. If you require these skins for other projects, save them in a user-defined theme, and then export them.

Create a Theme

For storing default as well as modified skins you create a new theme. In the Skin tab of the Project Explorer, click Default Theme list and then click Create New Theme. A new theme with a default name is created.

IMPORTANT: All the skins (default and customized) that are used in the project until the time of creating this new theme are added automatically to the newly created theme.

To create a new theme, navigate to Skins tab in the project explorer.

  1. Navigate to Skins tab in Project Explorer.
  2. Click the theme list and select Create New Theme.
  3. A new theme will be created with a random name. This theme contains all the skins you have created in Quantum Visualizer.

  4. Configure the skins as required and save the theme. The skins modified or created will be available for all the applications in Quantum Visualizer.
  5. NOTE: The themes you have created in Quantum Visualizer appear in the Theme drop-down list and you can easily navigate to other themes using the list.

Location of Theme Files

The theme files for a project are located in the following folder:

<Workspace>\<ProjectName>\<themes>

Rename a Theme

To rename a theme, do the following: 

  1. Navigate to Skins tab in Project Explorer.
  2. Click the theme list and select Rename.

  3. The Rename Theme dialog appears.

  4. Type a name for the name and click OK. The theme will be renamed.

Duplicate the Current Theme

To duplicate the current theme, do the following: 

  1. Navigate to Skins tab in Project Explorer.
  2. Click the theme list and select Duplicate Current Theme. The current theme will be duplicated and a random name is generated. You can rename the theme to a meaningful name.

Delete a Theme

To delete an existing theme, do the following: 

  1. Navigate to Skins tab in Project Explorer.
  2. Click the theme list and select Delete Current Theme. The current theme will be deleted.

NOTE: You can view the theme drop-down list to confirm if the theme is deleted.