Themes and Styles
In a software application, a theme is a visual pattern or a collection of patterns that defines the look and feel of a graphical user interface. The Vahana platform provides a default theme that you can apply to one or more applications on vDesigner. Apart from the default theme, you can create a customized theme that you can also apply to one or more applications on vDesigner.
When you create a theme, you can configure the following properties:
- Color Palette – Primary, Secondary, Neutral, Success, Warning, Danger , Info, Answer text and caption.
- Typography of elements.
- Padding of pages.
- Padding and margin of elements & pages.
Creating a Theme
A theme is a functionality that is incorporated into the Vahana platform. After you create a new theme, you can apply that theme to one or more applications on vDesigner. You can use themes to give your applications a consistent look and feel that matches your brand but still allows for customization as needed.
For example:- You can apply a theme:
- If you want all of your Vahana-generated emails to be in the same style but with different colors and fonts to match each application’s branding.
- Or, you want to create a theme that has one set of colors and fonts for all of your applications except a few or a specific application where it needs to be different.
The theme feature also provides a ?Style Viewer? utility. The ?Style Viewer? utility provides a preview of the visual pattern that helps you observe the appearance of the elements and how they will look in the ?Disable? and ?Enable? states after you apply a theme to the application.
To create a new theme:
- On the homepage of the Vahana portal, find the “nine-dots icon” (
).
- Click the “nine-dots icon”, and the Modules panel opens.
- On the Modules panel, under Vahana Tools, click Design System, and the Themes page opens.
- On the Themes page, click Create Theme, and the Create Theme dialog box opens.
- On the Create Theme dialog box, enter the details of a new theme as follows:
| Box | Description |
| Name | In this box, enter the name of the theme (For example: – Demo Theme). The name of the theme must have minimum five characters. |
| Tags | In this box, enter an alphanumeric value (For example: – Demo). This alphanumeric value can be used to search for a specific theme in the future if you have created multiple themes on the Vahana platform. |
| Description | In this box, enter a brief description of the theme. |
- After you enter the details of the theme, click Next; the Choose Template dialog box opens.
- In the Choose Template dialog box, select any of the following templates:
- Standard: – This template consists of rounded corners with an eight-pixel radius.
- Plain: – This template consists of sharp edges.
- After you select the template and then click Save, the application displays the newly created theme in a left panel.
- In the left panel, click Preview, and then click Save; the theme is successfully created and saved.
Configuring Properties in a Theme
When you successfully create a new theme, a Demo Theme panel appears at the left-corner of the Vahana portal. The Demo Theme panel provides the following properties that you can configure to define a desired visual pattern for the elements in the application. These properties are briefly described as below:
Note:- After you configure the properties in a theme, click Preview and then click Save to save and store the changed configuration properties.
Color-Specific Properties
| Property (Basic) | Description |
| Template | This property displays the name of the template that you had selected when you created a new theme. The Vahana portal incorporates inbuilt templates that you can choose to define a specific shape type for the elements in the application. If you want, you can change the template as follows: To select another template: –> In the Template box, click the edit icon (  ), and the Choose Template dialog box opens.–> In the Choose Template dialog box, select the template (For example: – Standard) and then click Save; the selected template starts appearing in the Template box. |
| Property (Color Palette) | Description |
| Primary | This property allows you to define the primary color of the element. The primary color refers to the color that is most frequently used across screens and elements in the app. The primary color can be used to make a color theme for the app by applying light and dark primary color variants. To configure the primary color, see the section: Configuring Color Property. |
| Secondary | A secondary color provides a way to accentuate and distinguish the elements. Using secondary color is optional. It should be used to accentuate a specific part of the element or user interface. The secondary color can be used in the following element types: –> Floating Action buttons –> Sliders and Switches –> Highlighted selected text –> Progress bar and –> Links and headlines To configure the secondary color, see the section: Configuring Color Property. |
| Neutral | The neutral colors are used for the background and text. In the neutral color scheme, the color is often denoted by the grey color variants. To configure the neutral color, see the section: Configuring Color Property. |
| Warning, Danger, and Success | These color types come under the category of semantic colors. The semantic colors are used for error, warning, success, and information. In the sematic color scheme, you can use the: –> Red color for error, danger, and wrong action –> Green color for success, safe, and right action –> Yellow color for alert, caution, and warning –> Blue color for information and important messages To configure the warning, danger, and success color types, see the section: Configuring Color Property. |
| Info | This color is often used to display the information text in the app. The information is treated as important and the app displays the information text to draw the attention of the user. For the information text, the variants of the blue color are used from the semantic colors scheme. To configure the info color, see the section: Configuring Color Property. |
| Answer Text | This color is used for the text that the end-user enters in the element to perform a specific function on the app. To configure the answer text, see the section: Configuring Color Property. |
| Caption | In a mobile app or web application, the caption means the title of the element. Based on the primary color scheme in the application, you can select the color for the caption. Often, the color variants of black and grey are used for the caption-based text. To configure the caption color, see the section: Configuring Color Property. |
Configuring Color Property
In the theme panel, this feature allows you to configure multiple color properties under the theme function. You can configure the primary color, secondary color, neutral color, warning color, caption color, etc.
To configure a primary color:
- Under a specific color property (For example: – Primary or Secondary), click the plus icon (
), and a color box appears and displays the color with its hexadecimal value.
- Click the first box (
), and a color based canvas opens.
- On the horizontal bar, move the handle to select a specific color type (For example: – Blue or Yellow).
- On the canvas, move the circle to find the tone of the selected color.
- After you select the color and find its tone, click outside the canvas, and the selected color starts appearing under the color property.
- Click the newly defined color, the Make Default link appears.
- Click the Make Default link, and the newly defined color becomes the default color of a specific color property.
Typography Related Properties
| Property | Description |
| Font Family | Click this list and then select the font for the characters in the app. The font type is applied to all types of characters, such as the caption of the element, message text, labels, screen titles, etc. |
| Selected Font | This property displays the name of the font that you select in the Font Family list. |
Padding Related Propeties
| Property | Description |
| Page | The page-level padding specifies the space (For example: – 10 px or 20 px) around the border of the page. In the page-level padding, the application places the element based on the padding around the left, right, bottom, and top borders of the page. Under Page, enter the value of the page-level padding in any of the four boxes or all four boxes. |
| Elements | At the element level, the padding specifies the space between the border of the element and its content. Under Elements, enter the value (For example:- 10 px) of the padding in any of the four boxes or all four boxes. |
Margin Related Property
| Property | Description |
| Element | This property allows you to define the space outside the element?s border. Under Element, enter the value of margin (For example: – 10 px) in any of four boxes or in all four boxes. |
Viewing a Theme
This feature allows you to access the details of the default or a user-defined theme. After you access a theme, you can customize the configuration details of a user-defined theme, except for the default theme.
To access and then view the details of a theme:
- On the homepage of the Vahana portal, find the “Kebab” module ().
- Click the Kebab module, and the Modules panel opens.
- On the Modules panel, under Vahana Tools, click Design System, and the Themes page opens.
- On the Themes page, find the list of themes.
- In the list of themes, under Name, find the name of the theme that you want to access.
- Click the name of the theme (For example: – Demo Theme2), and the Info panel expands and then displays the details of the theme.
- The Info panel displays the following details of the theme:
| Property Type | Description |
| General Details | This section displays the following details of a theme: i. Name of theme ii. Edit details link to modify the details of the theme iii. Description of the theme iv. Registered email ID of the user who has created the theme |
| Basic tab | Under general details of a theme, if you click the Basic tab, you find the following details: i. The type of template that the user had selected when s/he created the theme ii. Configured color-specific properties iii. Font type of the character iv. Padding and margin related properties |
| Application | After you click the Applications tab, it displays the name of one or more applications that the user has linked with the current theme. |
Editing a Theme
You can edit a theme after you access it. To access a theme, see the section: Viewing a Theme. After you access a theme, you can change the configuration of different properties in the theme. To change the configuration of the properties, see the section: Configuring Properties in a Theme.
Preview Feature
This function allows you to apply a theme to the application and then view and observe the look and feel of the application. By using this function, you only apply a theme to the under-development application on a temporary basis and then ensure whether the applied theme looks suitable to the visual pattern of the application.
This function helps you select a suitable theme according to the visual requirement of an application. Also, you can reconfigure the properties of a theme if you find the color and style schemes of these properties incompatible with the required visual pattern of the application.
To use the “Preview” feature:
- On the Themes page, see the list of themes.
- In the list of themes, find the theme that you want to apply.
- Under Name, double-click the name of the theme that you want to apply, and the Info panel displays the details of the theme.
- In the right panel, click the Real-time Preview list and then select the application to which you want to apply the theme.
- After you select the application, in the left panel, click Preview, and the right panel displays the elements and other UI components with a visual pattern based on the applied theme.
Consuming a Theme
This function allows you to link a theme to the under-development application in the vDesigner module. By performing this function, you link a specific theme to the application. After you consume a theme, the application starts displaying its elements based on the visual patterns that you configure for the different properties in the respective theme.
To consume a theme:
- Go to the vDesigner module and then find the vDesiger tool bar.
- On the vDesiger tool bar, click the Themes tool (
), and the Vahana dashboard displays the panel of a specific theme.
- Click the Theme list and then select the desired theme that you want to apply.
- After you select the theme, click Apply, and the theme is successfully applied.
- Go to the vDesigner module and then find the vDesigner tool bar.
- On the vDesigner tool bar, click the Sync tool (
), and the dashboard of the vDesigner module displays the message: “Latest Module Configuration synced successfully.“ - After you sync the vDesigner application, you can see the effect of the applied theme on the application.
Duplicate a Theme
This function allows you to create a new copy of the existing theme. When you create a new copy of the theme, you need to rename it. The new copy of the theme inherits the configuration settings from the theme from which it has been copied. After you make a copy of the existing theme, you can also change the inherited configuration settings that are suited to the requirements of the under development application.
To duplicate a theme:
- On the Theme page, find the list of themes.
- In the list of themes, under Name, find the name of the theme that you want to duplicate.
- After you find the theme (For example: – My Theme1), put the mouse pointer on the name of the theme.
- When you put the mouse pointer on the name of the theme, a group of icons (
) appears. - In the group of the icons, click the Duplicate icon (
), and the Duplicate <<Parent Theme Name>> (For example: – Duplicate My Theme1) dialog box opens. - In the dialog box, in the Name box, change or edit the name of the theme.
- After you enter the name of the duplicate theme in the Name box, click Duplicate, and the application displays the message: <<Parent theme name>> theme has been duplicated.
- The duplicate theme is successfully created that you can check in the current list of the theme.
Deleting a Theme
This function allows you to delete a theme, except the default theme. You can delete a theme if it is not linked to an application that is under development on the vDesigner application. If you have linked a theme to the vDesigner application, you cannot delete that linked theme.
To delete a theme:
- On the Theme page, find the list of themes.
- In the list of themes, under Name, find the name of the theme that you want to delete.
- After you find the theme (For example: – My Theme2), put the mouse pointer on the name of the theme.
- When you put the mouse pointer on the name of the theme, a group of icons () appears.
- In the group of the icons, click the Delete icon (
), and the Delete Theme dialog box opens. - In the Delete Theme dialog box:
- Click Delete to delete the theme.
- Click Cancel to not delete the theme.