What you can do with the Expert Theming panel

The UI theme designer offers multiple panels to adapt the SAP Fiori experience of your applications to your custom brand. Quick Theming lets you change only the few most prominent theming parameters, whereas Detailed Theming guides you through most control families and allows to change the theming parameters with most impact for them. Then there is Expert Theming, in which the broad generosity of all theme-able parameters is available.

This post goes into detail on Expert Theming. It depicts

• the different filtering modes from filtering on parameter types to filtering on control families,
• possible search operations,
• the usage of the Element Picker, and
• creative parameter values.

Expert Theming panel with highlight on filtering modes, element picker, search and parameter values

Filtering modes

The Expert Theming panel offers filtering based on parameter types, which can be combined with delta theming, a filter only for errors, different control families, and the search.

Effect of the different filtering modes (from top left): All, Colors, Dimensions, Fonts, images, Delta, Errors, and Button control family

Parameters can be filtered based on their type:

• the All filter displays all parameters regardless of their type,
• the Colors filter displays only colors, e.g. sapBrandColor or sapButton_Active_BorderColor,
• the Dimensions filter display all dimensions, e.g. border-radii like sapButton_BorderCornerRadius or font-sizes like sapFontHeader3Size,
• the Fonts filter displays all parameters targeting text, e.g. font colors like sapButton_Emphasized_Active_TextColor, but also font-weights like sapButton_Emphasized_FontWeight and text-shadows like sapButton_Emphasized_TextShadow, and
• the Images filter displays all images (there are only a few), i.e. sapBackgroundImage, sapCompanyLogo, sapShell_BackgroundImage and sapShell_Favicon.

The result of these filters can be further trimmed down with additional filters that can all be toggled (so multiple of them can be applied simultaneously):

• the Delta filter displays only parameters that you have changed in your custom theme,
• the Errors filter displays only parameters where the current value results in an error – if you focus the value (e.g. by clicking into the value field) you get a message that further explains the error,
• the Control Family filter lets you select the control families the parameter should apply to – usually this is only one (like “Button” or “List”); this is extremely useful in combination with the theming previews for the different control families: usually the workflow is to select the preview and then filter Expert Theming for the selected control family. Finally
• the Search allows to filter the list with multiple operations, which we will explore below – the most simple being a prefix search, e.g. sapButton shows all parameters starting with sapButton, like sapButton_TextColor or sapButton_Background.

With these tools at hand, you can author your custom theme in great detail but also without getting lost in the jungle of more than 700 theme-able parameters.

Search Operations

In the Search field of the Expert Theming panel, an existing filter (by default the “All” filter that displays all parameters) can be limited to a certain subset. This can even be done with a few search operators that allow for additional options.

The different search operations of the Expert Theming panel (from left to right): prefix search, css selector-based search, value-based search and parameter id-based search

There are four search modes available:

• Prefix search is the default: if you enter a string into the search field, it is treated as a prefix for all parameters, e.g. sapMessage filters for all parameters that start with sapMessage, like sapMessage_ErrorBorderColor and others.
• CSS selector-based search filters for all parameters that have an effect on the given css selector. To get into this mode, prefix your search with css:. E.g. the search css:.sapMBtnBase brings up all parameters that have an effect on elements with the sapMBtnBase class (the root class for all SAPUI5 sap.m.Button controls).
• ID-based search filters for parameter id prefixes, similar to the prefix search (i.e. sapMessage and id:sapMessage yield the same results). However, with ID-based search, multiple prefixes can be combined with the “|” operator, e.g. id:sapMessage|sapList filters for all parameters starting with sapMessage or starting with sapList. To get into ID-based search mode prefix the search with id:.
• Value-based search filters for all parameters that have a certain value. To get into this mode, prefix your search with value:. E.g. the search value:@sapButton_Active_Background brings up all parameters that have the value @sapButton_Active_Background, like sapButton_Lite_Active_Background or sapSlider_Active_HandleBackground. Notice that this search might be overzealous in that it also brings up sapButton_Active_TextColor, which is defined using a constrast()-statement based on sapButton_Active_Background. Like ID-based search, value-based search can combine multiple values with the “|” operator: value:#000|#fff filters for all values that resolve to a string that contains #000 or #fff (like sapPrimary3, which is the color #fff in Morning Horizon, or the color #fff3b8).

With those search operators, you can drill down the Expert Theming to just the parameters that you need.

Element Picker

Another handy tool in the Expert Theming panel is the Element Picker. It lets you select an element in the active theming preview and lists all theming parameters that have an effect on the selected element.

Group parameters selected with the Element Picker of the Expert Theming panel

When the Element Picker is active, it highlights the currently hovered element in the theming preview. When you click, it analyzes the CSS applied to the clicked element and extracts all theming parameters that have an effect on it. With that, it creates an ID-based search for all those parameters and updates the search field with it.

Note that the analysis also contains non-theme-able parameters, e.g. sapPrimary3 (a protected parameter of the Base framework) or sapUiButtonBorderCornerRadius (a parameter of the SAPUI5 framework, which is mapped to the theme-able sapButton_BorderCornerRadius).

With the Element Picker you can select the element you want to work on without giving thought to the underlying parameter structure.

Parameter Values

Once you have filtered the list of parameters to the smaller subset you want to work on, you can get creative in assigning values to them. Knowing that the Theming Engine compiles custom themes via less, there is a wide variety of options you can choose from:

• Good old plain values, like #c0ffee or 2px.
• References to parameters, like @sapBrandColor (here you need the @, as this is less’s way to reference parameters) or parameters you created in the Palette panel (e.g. a parameter named gold would be referenced with @gold).
• Less functions operating on values, parameters or other functions, from the omnipresent contrast(<background>, <color-when-light>, <color-when-dark>) over color-functions like darken(<color>, <amount>) to calculations (@sapButton_BorderWidth + 0.0625rem) and string interpolations (~”calc(@{sapButton_BorderWidth} + 1px)”).

Palette panel of the UI theme designer

You can get a full overview of what is possible with less in the less documentation on https://lesscss.org/. However, be warned that the Theming Engine uses less 1.6.3 for stability, so some more modern less features (like e.g. mixin return values) are not available.

Recap

We have seen what Expert Theming is capable of:

• Parameters can be filtered by their type (All, Colors, Dimensions, Fonts or Images) and then further filtered by delta, errors and control families.
• The search offers a fine-grained approach with prefix-search (e.g. sapButton), as well as CSS-selector based search (e.g. css:.sapMBtnBase), ID-based search (e.g. id:sapMessage|sapList) and value-based search (e.g. value:#000|#fff).
• The Element Picker constructs an ID-based search from all parameter affecting the element selected with the Element Picker in the preview.
• Parameter values are processed with less, so everything that can be assigned to a less parameter is possible as a parameter value – from plain values (e.g. #c0ffee) over references (e.g. @sapBrandColor) to functions (e.g. darken(@sapHighlightColor, 20)), calculations (e.g. @sapButton_BorderWidth + 0.0625rem) and string interpolation (e.g. ~”calc(@{sapButton_BorderWidth} + 1px)”).

Go ahead and try these out! And discuss in the comments how it went. Was anything new to you in this post? What is your favorite working model when creating a new custom theme? What would be your biggest feature wish?