Documentation

Search results

How to create custom application theme

Once you have extracted the template file downloaded from the link in the Manage Application Theme dialog, you can manually edit the css variables and assign color codes in the template file to customize the theme.

Let’s learn some basics on CSS3 variable and color code assignments.

CSS3 variable syntax: name:value;

Here name represents the variable name and it should starts with two dashes (--). For example, --primary-branding-color.

The value represents the hexadecimal representation of the color code that you want to assign to this variable. For example, #ffffff. You can either assign hex color code or use the already defined CSS3 variable name like below.

CSS3 variable

Points to be noted while editing and uploading custom theme file.

To avoid errors in color assignment, please check this online color picker tool to get the hex value for the color you wish to use in template file.
Make sure that you use appropriate color codes that will be suitable for the mode you prefer to customize. For example, use light based colors in dark mode and dark based colors in light mode, so that the visibility will be clear.
A custom theme can only be created for either the dark or light mode. A single custom theme will not work for both. Please choose a custom theme based on your current application mode. To reset the custom theme, please select the default value.
Once a theme is uploaded, you can’t change the color codes in the already uploaded theme file with the same name or by deleting theme file. You need to re-upload a new file with changes for further customization.
Before uploading the custom theme file, please ensure your custom theme file is valid by uploading it into this online validation helper.

Assign color code to variables in template file

Simple Customization

You can customize the branding color, primary text, secondary text, active text, and hyperlink colors by changing color codes for the below mentioned variables. These minimal changes will be enough to customize all components and elements.

Branding Color

You can customize the branding color by changing the --primary-branding-color variable. This will reflect in the areas and components shown in the below image.

Branding color

--primary-branding-color

Typography

You can customize primary text, secondary text, hover text, active text, and hyperlink color over the entire application by changing the color codes on the below variables.

Primary text

--primary-text-normal-color

--primary-text-hover-color

Secondary text

--secondary-text-normal-color

Hyperlink

--hyper-link-normal-color

--hyper-link-hover-color

Advanced Customization

You can also customize the active and hover state colors, the primary button, secondary button, and link button by assigning color code to their respective variables.

State background

You can customize hover background and active background color over the entire application by changing the color codes on the below variables.

Active background

--active-bg-normal-color

Active state text

--active-text-normal-color

Hover background

--hover-bg-normal-color

Buttons Customization

You can customize the primary button, secondary button, and link button colors, by changing the color codes on the below variables for normal, hover, and disabled state.

Primary button normal

--primary-btn-bg-normal-color

--primary-btn-text-normal-color

--primary-btn-border-normal-color

Primary button hover

--primary-btn-bg-hover-color

--primary-btn-text-hover-color

Primary button disable

--primary-btn-bg-disable-color

--primary-btn-text-disable-color

--primary-btn-border-disable-color

Secondary button normal

--secondary-btn-bg-normal-color

--secondary-btn-text-normal-color

--secondary-btn-border-normal-color

Secondary button hover

--secondary-btn-bg-hover-color

--secondary-btn-text-hover-color

Secondary button disable

--secondary-btn-bg-disable-color

--secondary-btn-text-disable-color

--secondary-btn-border-disable-color

Link button normal

--link-btn-bg-normal-color

--link-btn-text-normal-color

--link-btn-border-normal-color

Link button hover

--link-btn-bg-hover-color

--link-btn-text-hover-color

--link-btn-border-hover-color

Navigation menu customization

You can customize normal background, hover background, active background, primary text, and hyperlink color for the main navigation menu by changing the color codes on the below variables.

Navigation menu main background