Ephesoft UI is now made configurable to use different color themes of a user’s choice. Now a user can choose any three base colors of his choice and it will be reflected in the whole application by just refreshing the page. Whenever the user logins, the selected theme will be displayed.
An icon for changing the theme is being displayed on the right-top corner. Clicking on the icon will open a page that will contain multiple themes. User can choose any theme of his choice. Clicking on the “Apply” button will set the selected theme all over the application. User can revert back to the previous theme by clicking the “Undo” button.
A ‘themes’ folder is added inside the Application containing following files:-
- theme.less file
- Js files for different themes
theme.less is the file where all configurations have to be made for color and image path. It contains the following properties which need to be configured:-
- @base: hexadecimal color codes for the tabs and sub-tabs of the application.
- @baseDark: hexadecimal color codes for the buttons and links in the application.
- @baseLight: hexadecimal color codes for backgrounds, selected document or folder and grid tables.
- @gridRowSelectionColor: hexadecimal color code or color name for grid row selection.
- @overlayColor, @overlaySecondColor, @overlayThirdColor, @overlayBorderColor: hexadecimal color code or color name for overlay backgrounds shown on RV Screen and Advanced KV Extraction screen.
To be specific:
@overlayColor: background color of overlay on RV screen, overlay on Table Extraction and overlay generated on selecting a key/value while defining an advanced KV pair
@overlaySecondColor: background color of overlay generated on capturing a key while defining an advanced KV pair
@overlayThirdColor: background color of overlay generated on capturing a value while defining an advanced KV pair
@overlayFourthColor: background color of overlay generated on captured value on Table Extracted on RV Screen
@overlayBorderColor: Color of all overlay boundaries
- @themeImagePath: path of the image folder for the respective theme. For example:-
- @indexFieldBorderColor: order color for index field on RV Screen.
- @thumbnailHightlightBorder: color of the border of the selected thumbnail on RV screen and web scanner screen.