A theme is a predefined set of colors for the application UI. Use any of the out-of-the-box themes – Default, Dark, or Mocha – to configure the look and feel of the UI of the Solution Builder and all the Applications with a single click of the APPLY button. You are encouraged to use themes to change the look and feel of a multitude of entities at once rather than set all the options individually.
The screenshot below shows the three out-of-the-box themes in the grid with the Mocha theme open in preview.
You can modify the out-of-the-box themes or create custom themes to customize the look and feel of applications you build.
To switch between the existing themes:
- Go to Matrix42 > Administration > User Interface > Themes and click the theme you would like to apply in the themes grid to open the Preview dialog on the right.
- Click the APPLY button in the main toolbar of the preview and confirm your choice by clicking another APPLY button at the bottom of the confirmation page that appears. The selected theme will be immediately applied and the corresponding Is Active checkbox selected next to the applied theme in the grid.
Creating a New Theme
To create a new theme:
- Go to Matrix42 > Administration > User Interface > Themes and click the FAB button in the bottom right-hand corner of the themes grid.
- In the New Theme dialog that appears:
Specify the Name and Description for the new theme. As soon as you specify the Name for the new theme, the Default theme will appear in the Preview area below. Now you can modify the Default theme as you see fit to create a new custom theme.
Use the tabs – DEFAULT COLORS, OTHER COLORS, PALETTE COLORS, LOGO, and TYPOGRAPHY – to set up the new theme, keeping in mind that all the colors pre-selected under the tabs are copied from the Default theme. One by one, click the color picker controls in the fields you would like to customize and select the new colors. The theme Preview will keep reloading with the new look as you pick the colors to display the changes you make.
Under the DEFAULT COLORS tab, set colors for the Application Header, Body, and Content:
Icon Color: select the color of icons displayed in the Application Header.
Text Color: select the color of text displayed in the Application Header.
Background Color: select the background color for the Header.
Background Color: select the background color for the Navigation Panel located on the left of the screen.
Text Color: select the color for the text displayed in the Navigation Panel.
Icon Color: select the color for the icons located in the Navigation Panel.
Icon Color: select the color for the icons located in the body of the application, i.e. in grids, dialogs, wizards, etc.
Text Color: select the color for the text displayed in the body of the application, i.e. in grids, dialogs, wizards, etc.
Background Color: select the color for the background of the application body and all the entities (e.g. dialogs) located in the body of the application.
Under the OTHER COLORS tab, set other colors as explained below:
Active Color: select the color to highlight currently active entities in the application UI. For example, the active color is used to highlight the currently active navigation item in the Navigation Panel and in the breadcrumbs in the Application Header. The active color is also used to highlight the currently active row in grids and the currently active tab in dialogs, selected checkboxes and radio buttons, as well as the currently active application in the Application picker.
Success Color: select the color for success messages.
Warning Color: select the color for warning messages.
Info Color: select the color for information messages.
Error Color: select the color for error messages.
Action Button Color: select the color for the action buttons, such as Add and Configure usually displayed in the bottom right-hand corner of the screen and buttons in wizards taking you to the next step or completing the wizard.
Button Color: select the color for all the other buttons, the ones that do not fall under the Action Buttons category. There are only a few such buttons in the system. An example would be the Run Search button in Advanced Search.
Under the PALETTE COLORS tab, select Palette Colors for the theme. You will be able to pick the colors selected here in the Layout Designer, the color picker control (see outlined in red below).
Under the LOGO tab, upload the logo to be displayed in the header of the application. Make sure to adhere to the specified dimensions for the image you upload: the width should be 446 px max, and the height should not exceed 89 pixels.
Under the TYPOGRAPHY tab, select the Default Font Color (rarely used) which is the default color for text that does not fall under any of the text color categories available under the DEFAULT COLOR tab. The rest of the settings under this tab are disabled for now.
Make sure to SAVE the changes.
For more details please read also:
Use Themes to customize Fleet Management application appearance