Skip to main content
Matrix42 Self-Service Help Center

Themes

  1. Last updated
  2. Save as PDF

Overview

A theme is a predefined set of colors for the application UI. Use any of the out-of-the-box themes 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. 

You can modify the out-of-the-box themes or create custom themes to customize the look and feel of the applications you build.

Default Themes

The Administrator can change the theme for the entire system at once via Administration application → User Interface → Themes:

themes_all.png

The extended list of 11 out-of-the-box themes is available in 10.1.0 DWP release version.  It has 8 new color themes for the products from a neutral default to refreshing light themes to mellow dark ones. All themes are contrast optimized to ensure legibility and reduce eye strain. 

Earlier DWP versions offer only 3 themes: Default, Dark, and Mocha, featured in the new release as Classic Themes.

Themes Overview

Click on the Theme to see a preview before applying the theme:

Theme Preview

Aesthetic

 01_themes_aesthetic.png

Classic (former Default)

 02_themes_classic.png

Classic Dark (former Dark)

 03_themes_classic_dark.png

Classic Mocha (former Mocha)

 04_themes_classic_mocha.png

Dark

 05_themes_dark.png

Dark Blue Cyan

 06_themes_dark_blue_cyan.png

Dark Night

 07_themes_dark_night.png

Default

 08_themes_default.png

Indigo

 09_themes_indigo.png

Light

 10_themes_light.png

Mocha

 11_themes_mocha.png

 

Applying Themes

To switch between the existing themes:

  1. Go to  Administration → User Interface → Themes;
  2. Click the theme to open the Preview page;
  3. Click the Apply action in the main toolbar of the preview and confirm your choice by clicking Yes 

The selected theme will be immediately applied to the entire system. The applied theme is marked on the theme's grid as Is Active.

The applied Theme is the same for the entire system and can not be personalized per user or role.

Modifying Existing Themes

To modify the existing theme:

  1. Go to  Administration → User Interface → Themes;
  2. Choose the theme you would like to modify: click the theme to open the Preview page;
  3. Click Copy Theme action;
  4. Provide the new theme name and click the Copy Theme button;
  5. In the Themes grid, click on the new theme you have created;
  6. Click the Edit action in the main toolbar of the preview;
  7. Introduce necessary changes, for instance, change Icon Set or any other property;
  8. Click Done.

When ready, proceed to Apply theme action.

The Default theme is a system theme that can not be modified, but you can create a copy of the Default theme with Copy Theme action, introduce any required changes and run Apply action.

It is recommended to modify the out-of-the-box themes with the Copy Theme action. If you apply any changes directly in the out-of-the-box theme and save them, they can not be reverted.

Creating a New Theme

To create a new theme:

  1. Go to Administration → User Interface → Themes;
  2. Click the Add Theme action on top of the Themes grid page;
  3. In the New Theme dialog that appears specify necessary information:

    The New Theme is pre-filled with values from the Default Theme that can be modified according to your choice.

    1. Name: provide a name for the new Theme;
    2. Description: optional description;
    3. Icon Set: choose from the suggested list or install a new Icon Set via Extension Gallery. For more information, see also Nucleo Icons Set.
    4. Logo: change the company logo. Click the Upload icon in the top left corner on the placeholder of the current logo. Recommended image width: 446px, height: 89px;
    5. Colors: enter a HEX color code or choose a value with RGB color picker in the suggested fields and instantly preview the changes in the theme editor. 
      new theme.png
      Define colors for the following UI elements of the applications in the suggested tabs: 
      • Base Colors:
        • Header:
          • Icon Color: select the color of icons displayed in the Application Header.
          • Text Color: select the color of the text displayed in the Application Header.
          • Background Color: select the background color for the Header.
        • Navigation:
          • Background Color: select the background color for the Navigation Panel.
          • 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.
        • Content:
          • 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.
          • Default Font Color: the default color for text that does not fall under any of the text color categories available under the Base Colors tab. 
      • Accent Colors:
        • Primary 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, currently active tab in dialogs, selected checkboxes, and radio buttons, as well as the currently active application in the Application picker and as the default title color of the First title line and Second title line properties for the activated Unified Search Experience. 
        • Buttons:
          • 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.
        • Messages:
          • 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.
        • Search:
          • Unified Search Background Color: the color used for the background image of the activated Unified Search Experience control if the custom image is not set. For more details, see Unified Search Experience page.
      • Additional Colors: select additional colors for the Theme. These colors are used in Charts. Also, you will be able to pick the colors selected here in the Layout Designer, in particular in the color picker control:
        themes_color_picker_additional_colors.png

        Starting from DWP v.12.0.2 all color pickers no longer have technical names and display the name based on the area, where this color is applied, similarly to the Theme color settings in the Administration application.

Extra colors were introduced in the color picker since  DWP v.12.0.2, among them:

  • Success Text Color
  • Error Text Color
  • Warning Text Color
  • Info Text Color
  • Faded color
  • Fadest color

They are dynamically calculated based on the current text color and background color used in the Theme and suggested in the picker, therefore they will always fit into the color palette of the current Theme and when selected, just like the other colors of the Theme, are automatically adjusted to the Enhanced Color Contrast mode. 

Make sure to Save the changes or click Done.

Click Apply action to apply the new custom theme.