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 represents the variable name and it should starts with two dashes
(--). For example,
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.
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.
You can simply customize the branding color, primary text, secondary text, active text and hyper link colors by changing color codes for the below mentioned variables. These minimal changes will be enough to customize all components and elements.
You can customize the branding color by changing the
This will reflect in the areas and components shown in the below image.
You can customize primary text, secondary text, hover text, active text, and hyper link color over the entire application by changing the color codes on the below variables.
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.
You can customize hover background and active background color over the entire application by changing the color codes on the below variables.
Active state text
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 button hover
Primary button disable
Secondary button normal
Secondary button hover
Secondary button disable
Link button normal
Link button hover
Once you customize the template file with advanced customization it will look like the image shown below.