Using the UI Theme Designer

Objective

After completing this lesson, you will be able to use the UI Theme Designer.

Adaption of Themes

UI Theme Designer is a browser-based editor.

Watch this video to learn more about UI Theme Designer.

Diagram with three block: Supported technologies like Unified Rendering, SAPUI5, and others, Delivery Channels like SAP NetWeaver AS ABAP and SAP Enterprise Portal, and an SAP Note 1852401.

The UI Theme Designer supports all web-based SAP applications and clients based on HTML4 and HTML5. It is available in three channels:

(SAP NetWeaver) Application Server ABAP
Transaction /UI5/THEME_DESIGNER
SAP Enterprise Portal
Content Administration→Portal Display→Portal Themes→UI Theme Designer
SAP Business Technology Platform
SAP Fiori launchpad→User Actions Menu→Theme Manager→Launch Theme Designer

Prerequisites, installation, and configuration are available in the SAP Note 1852401 – UI Theme Designer for SAP NetWeaver AS ABAP (main SAP Note).

Hint

When creating themes for the Unified Rendering, it is recommended to always use the latest version. Please check SAP Note 2090746 – WD ABAP: Unified Rendering Update with TCI - Instructions and Related SAP Notes. for details.

To design a theme, refer to the following procedure.

Flowchart for SAP UI theme customization: 1. Select base theme, 2. Add template application, 3. Define color palette, 4. Change main parameters, 5. Go into details. Arrows indicate sequence.

All themes have a base theme (CSS files). For SAP Fiori 3, this is SAP Quartz Light. After choosing a template application to visualize the changes, the new theme is built upon a set of theme-related (specific style) CSS files. The theme generator merges the base theme with the specific style into the final theme.

SAPUI5 uses LESS to handle the CSS parameters and allows some additional features. LESS can be considered a preprocessor that results in the final version of the CSS. Find out more at http://lesscss.org/.

Four different SAP Fiori themes: SAP Fiori with Horizon, SAP Fiori 3, SAP Fiori 2.0, and High Contrast Black/White. Each displays an employee notification approval interface.

The available base themes depend on the release of the system providing the UI theme designer.

SAP delivers the following themes for SAPUI5:

SAP Morning / Evening Horizon
  • Theme released for SAP Fiori with Horizon
  • Initial shipment in SAP S/4HANA Cloud 2202 / SAPUI5 1.102
  • Uses own typeface "72"
SAP Quartz Dark
  • Theme released for SAP Fiori 3
  • Initial shipment in SAP S/4HANA Cloud 2002 / SAPUI5 1.72
  • Uses own typeface "72"
SAP Quartz Light
  • Theme released for SAP Fiori 3
  • Initial shipment in SAP Cloud Platform 1904 / SAPUI5 1.65
  • Uses own typeface "72"
SAP Belize (Deep)
  • Theme released for SAP Fiori 2.0
  • Initial shipment in software component SAP_UI 7.51 / SAPUI5 1.44
  • Uses typefaces Arial Regular and Bold
SAP High Contrast Black / White
  • Theme released for accessibility purpose
  • Initial shipment in software component SAP_UI 7.40 / SAPUI5 1.28
  • Flavors for SAP Belize, Quartz, and Horizon
SAP Blue Crystal – Deprecated
  • Theme released for SAP Fiori
  • Initial shipment in software component SAP_UI 7.40 / SAPUI5 1.28
  • Uses typefaces Arial Regular and Bold
SAP Gold Reflection – Deprecated
  • Theme released for non-Fiori standalone apps
  • Initial shipment in SAPUI5 1.0
  • Not working with SAP Fiori

Maintenance of Themes

Screenshot of the Theme Tool showing theme maintenance options like Info, transport, download, and delete for theme EducCornPoppy, with detailed URL parameters below.

The Theme Tool manages the themes in the theme repository of an Application Server (AS) ABAP. Themes can be viewed, imported, exported, and deleted, as well as transported to the follow-up system. This is also the easiest way to get a URI pointing to a certain theme. Start the tool using the following transaction: /UI5/THEME_TOOL.

Watch the video to see how to set central theme parameters for the SAP Fiori launchpad. Setting Central Theme Parameter

Theme Parameter Values

ThemeParameter Value
SAP Belizesap_belize
SAP Belize Darksap_belize_plus
SAP High Contrast Black (Belize)sap_belize_hcb
SAP High Contrast White (Belize)sap_belize_hcw
SAP Quartz Lightsap_fiori_3
SAP Quartz Darksap_fiori_3_dark
SAP High Contrast Black (Quartz)sap_fiori_3_hcb
SAP High Contrast White (Quartz)sap_fiori_3_hcw
SAP Morning Horizonsap_horizon
SAP Evening Horizonsap_horizon_dark
SAP High Contrast Black (Horizon)sap_horizon_hcb
SAP High Contrast White (Horizon)sap_horizon_hcw

Create SAP Fiori Themes

Business Example

You want to create and test a theme for SAP Fiori launchpad using the UI Theme Designer.

Note

This exercise requires an SAP Learning system. Login information is provided by your system setup guide.

Note

Whenever the values or object names in this exercise include ##, replace ## with the number of your user.

Task 1: Create a Theme and Define a Color Palette in the UI Theme Designer

ExerciseStart Exercise

Steps

  1. In the UI Theme Designer of your SAP S/4HANA (S4H) system, create a theme based on the SAP Morning Horizon theme.

    1. In the SAP Easy Access menu of your S4H, search for UI Theme Designer or start transaction /UI5/THEME_DESIGNER.

    2. In the UI Theme Designer, choose Create a New Theme.

    3. In the Base Theme menu, choose SAP Morning Horizon.

    4. Choose Create Theme.

  2. Add the SAP Fiori launchpad of your SAP S/4HANA (S4H) system as preview.

    1. Choose the + next to Preview Pages.

    2. In the Link to Application field, enter /sap/bc/ui2/flp.

    3. In the Name of Application field, enter SAP Fiori Launchpad.

    4. Choose Add.

  3. Define a color palette parameter called CornPoppyRed in your theme with the hexadecimal value E00025.

    1. Choose the Palette tab in the upper right.

    2. In the Enter parameter ID field, enter CornPoppyRed.

    3. For the Parameter color field, open the value help.

    4. In the Hex field, enter e00025.

    5. Choose OK.

    6. Choose Add palette parameter (+ next to the value help).

Task 2: Design a Theme in the UI Theme Designer

ExerciseStart Exercise

Steps

  1. In the UI Theme Designer of your S4H, change the main Brand Color in your theme to CornPoppyRed.

    1. In the UI Theme Designer of your S4H, choose the Quick tab.

    2. For the Brand Color field in the Main group, open the value help.

    3. In the Palette pane, choose CornPoppyRed.

    4. Note the change of the Link Color.

  2. Set the FioriMeadow.jpg image from the course folder on the training share as Background Image/Gradient of the Shell Canvas for your theme.

    Note

    Course folders on the training share can be found at S:\Courses.

    1. Choose the Detailed tab.

    2. For the Background Image field in the Shell Canvas group, open the value help.

    3. Choose Drop image files here or press to browse.

    4. Select S:\Courses\UX100_24\FioriMeadow.jpg.

    5. Choose Open.

    6. Choose OK.

  3. Change the sapShellColor in your theme to CornPoppyRed.

    1. Choose the Expert tab.

    2. Select the filter Colors.

    3. In the Search field, enter shellc and choose Enter.

    4. For the sapShellColor field, open the value help.

    5. In the Palette pane, choose CornPoppyRed.

    6. Note the change of many other colors.

Task 3: Build and Preview a Theme in the UI Theme Designer

ExerciseStart Exercise

Steps

  1. In the UI Theme Designer of your S4H, save and build your theme as CornPoppy## with the description Corn Poppy Meadow ##. Run a preview of your theme in the UI Theme Designer.

    1. In the UI Theme Designer of your S4H, in the menu, choose Theme→Save As….

    2. In the Theme ID field, enter CornPoppy##.

    3. In the Title field, enter Corn Poppy Meadow ##.

    4. Choose Save.

    5. In the menu, choose Theme→Save & Build.

    6. Choose Preview built theme in a new window (Triangle above the preview).

Configuration Parameters for SAP Fiori Themes

These customizing parameters can be used to configure the themes in the SAP Fiori launchpad:

DARK_MODE

Specify if users can enable the dark mode.

true (default)/false

THEMING_DEFAULT_THEME

Specify the default theme for the users.

sap_horizon (default)

THEMING_HIDE_SAP_THEMES

Specify whether the SAP themes are removed from the Settings.

true/false (default)

USERSETTINGS_SET_THEME

Specify whether users can select a different theme in the Settings.

true (default)/false

Learning
SAP FacebookSAP YoutubeSAP LinkedIn