Create a custom theme

To make a launchpad display a consistent corporate identity, you first create a custom theme in the UI5 Theme Generator, then apply it to a launchpad layout, and finally assign that launchpad layout to a launchpad.

In this example, you configure a custom theme in advanced mode for the fictional company Eco Corp, with the objective of applying their brand color with HEX code #2E8B57 and varying complementary colors according to corporate identity guidelines across the launchpad used by end users.

Prerequisites

  • You have converted the HEX code #2E8B57 to its component HSL values: Hue 146, Saturation 50%, Lightness 36%.

Procedure

Create custom theme

  1. In the Cockpit, select the UI5 Theme Generator and select Create.

  2. In the Theme Generator dialog, enter the name Eco Corp, give the custom UI5 theme a description, assign it to a development package, and select a light appearance to apply to the custom theme.

  3. Select Create.

    Result: You start in the expert mode.

  4. Change to advanced mode.

  5. In Brand Color, enter the converted HSL values for Eco Corp.

  6. In Highlight Color, choose a complementary color, for example, gold, with the HSL values Hue 45, Saturation 80%, Lightness 60%.

  7. In Shell Header Color, in order to create a contrast, create a dark shell header for Eco Corp by adjusting the lightness to 20%.

  8. In Content Background Color, in order to create a contrast to the shell header and enhance visibility, set to very light grey (Hue: 0, Saturation:0, Lightness: 95).

  9. Preview the changes in the preview pane that individual elements display according to entered settings, and that these settings align with corporate identity guidelines.

  10. Select Save.

Apply custom theme to a launchpad layout

  1. In the Cockpit, select the Launchpad Layout tool and select a launchpad layout from the list.

  2. In Settings, ensure that the launchpad layout has light appearance selected in Brightness.

  3. In Theme → UI5 Theme, select the custom theme Eco Corp and select Save.

  4. Reload and optionally run your launchpad using the selected launchpad layout.

Result

  • You have created a custom theme in advanced mode and have applied the custom theme to a launchpad layout that is assigned to a launchpad.

  • When you run your launchpad, all apps running inside the launchpad reflect the selected Eco Corp corporate identity color-coding configured as the base theme.

Related topics