Creating a Theme for SAPUI5 Desktop Applications

This example shows how you design a theme for SAPUI5 desktop applications.

In the following steps, you will create a new theme with the primary colors green and white and with your company logo in the header area. The result should look as follows:

Example of a Custom Theme for SAPUI5 Mobile Apps
  1. Start the UI theme designer.
  2. In the initial screen, select the theme SAP Gold Reflection and choose Open.
  3. Add the preview application for the UX3 Shell.
    1. Click on the link UI5 Control Previews.
    2. In the UX3Controls section, mark the Shell checkbox.
    3. In the Target Pages panel, select the control preview you just added.
  4. Change the brand color to green.

    In the Quick tab, enter a color (for example "green") or a color code (for example #00bb00) for the Brand Color input field.

    You can also select the value help and use the color picker to define the color value.
  5. Change the background color to white.
  6. Change the Shell Header Color to #1C4A21.
  7. Change the highlight color to green (#00bb00).
  8. Insert your company logo.
    1. Open the value help for the Company Logo input field.
    2. Drag and drop an image file from your local files to the Assign Image dialog box or choose Add Target Content to call up a file browser.
    3. Confirm the dialog box.

    If you know the URL of the image you want to use, you can specify this directly as the value of the input field.

  9. Change the link color to #068A06
  10. Change the field border color to green (#068A06).
    1. Switch to the Expert tab
    2. Choose Tag View to switch to the tag view.
    3. From the list of toggle links, choose Field.
    4. Change the value of the sapField_BorderColor parameter to a shade of green.