With UI theme designer you can easily adapt the user interface of SAP Fiori applications to your corporate branding. In this process you create a custom theme based on an SAP theme.
This post gives an overview of what is part of a theme, and what parts can be actually adapted in a custom theme:
With that the folder structure of a theming-repository like the one in the open-source theming-base-content can easily be understood.
The first thing that comes to mind that describes a theme is the set of theming parameters. I described an evolution of the parameter set in Semantic theming with theming-base-content.
Of the 753 available theming parameters (analysis based on theming-base-content 11.1.38), 673 are available for custom-theming in Morning and Evening Horizon, the latest SAP theme, which is near to 90%.
A general rule of thumb is: the lower the impact of a theming parameter is, the higher is the possibility that it is available for custom-theming.
That means that almost all 602 colors, from very specific parameters like @sapButton_Handle_Negative_Hover_BorderColor to very broad parameters like @sapBrandColor are theme-able.
Also the most important of the 63 font parameters are theme-able. Although technically you could destroy your UI with them by increasing @sapFontSize or using Comic Sans as @sapFontFamily.
Even most of the 41 dimension parameters like border widths and border radii are theme-able. They should be handled with care, as an insane border-width easily distorts the carefully crafted application UI.
That is also why no metric parameters are theme-able. Parameters like @sapElement_Height, which should define the height of all "single-line" controls/components ("elements"), exist for consistent theming when a new SAP theme is envisioned, but they are to be handled so carefully that even we refrain from changing them too often.
A theme is more than its set of theming parameters. There is also a set of assets associated with a theme. Usually not with a single theme but at least with all SAP themes of the same theme family (e.g. all Horizon themes).
Most assets are not (easily) available for custom theming. Things like the 72 Font Family are core to the Fiori design language and also have a lot of accessibility considerations associated with them. To change them you have to resort to hacks like embedding the whole font as base64 in custom CSS as described in Add custom font in theme design in SCP (approach).
We know about the need to upload a custom font, especially for the SAP-icons. But the requirements to create an enterprise-ready solution for that are larger than what we can fulfill in the short term.
What can be uploaded already is a company logo. This is stored together with the custom theme and available for the SAP Fiori Launchpad.
Not immediately obvious, but for existing applications more than relevant, is the guideline that is associated with a theme (or again: with a theme family). It describes how parts of the UI should be laid out, and can change drastically between theme families.
The guideline affects for example
From the perspective of the theming-base-content the guideline is just a single word at the right place (in the tags of a theme – here you also see that a guideline can span more than one theme family: Morning Horizon implements the Fiori_3 guideline that was introduced with Quartz and even retrofitted to Belize). But from the application framework perspective this guideline influences a lot of rendering decisions.
With theming parameters, assets and guidelines in mind, we can take a look at the structure of a theming-repository: the content of theming-base-content:
And then inheritance comes in to play and shared assets are stored at shared places. E.g. the 72 Font Family is not part of Horizon or Quartz or Belize theme family, but instead stored directly in baseTheme, because it is so central to the SAP Fiori experience. On the other hand, the Horizon family comes with a revised set of SAP-icons, so these are stored with Morning Horizon (as the base for Horizon themes).
This allows resource sharing and an efficient storage mechanism for SAP- and custom themes.
We saw that a theme is more than its parts, it consists at least of
This is reflected in the structure of theming-repositories like the content of theming-base-content, where inheritance and resource sharing make storing themes efficient.
Let me know about your experiences with custom themes. Leave a comment on what parameters you are most likely to custom theme, or which assets you would really like to upload. I'm curious about your insights!
This post gives an overview of what is part of a theme, and what parts can be actually adapted in a custom theme:
- theming parameters like colors and metrics,
- assets like fonts and icons, and a
- guideline that decides how applications should arrange their UI.
With that the folder structure of a theming-repository like the one in the open-source theming-base-content can easily be understood.
Theming Parameters
Detailed guide for Button parameters of a custom theme based on Morning Horizon
The first thing that comes to mind that describes a theme is the set of theming parameters. I described an evolution of the parameter set in Semantic theming with theming-base-content.
Of the 753 available theming parameters (analysis based on theming-base-content 11.1.38), 673 are available for custom-theming in Morning and Evening Horizon, the latest SAP theme, which is near to 90%.
A general rule of thumb is: the lower the impact of a theming parameter is, the higher is the possibility that it is available for custom-theming.
That means that almost all 602 colors, from very specific parameters like @sapButton_Handle_Negative_Hover_BorderColor to very broad parameters like @sapBrandColor are theme-able.
Also the most important of the 63 font parameters are theme-able. Although technically you could destroy your UI with them by increasing @sapFontSize or using Comic Sans as @sapFontFamily.
Even most of the 41 dimension parameters like border widths and border radii are theme-able. They should be handled with care, as an insane border-width easily distorts the carefully crafted application UI.
That is also why no metric parameters are theme-able. Parameters like @sapElement_Height, which should define the height of all "single-line" controls/components ("elements"), exist for consistent theming when a new SAP theme is envisioned, but they are to be handled so carefully that even we refrain from changing them too often.
Assets
File chooser for the company logo of a custom theme based on Morning Horizon
A theme is more than its set of theming parameters. There is also a set of assets associated with a theme. Usually not with a single theme but at least with all SAP themes of the same theme family (e.g. all Horizon themes).
Most assets are not (easily) available for custom theming. Things like the 72 Font Family are core to the Fiori design language and also have a lot of accessibility considerations associated with them. To change them you have to resort to hacks like embedding the whole font as base64 in custom CSS as described in Add custom font in theme design in SCP (approach).
We know about the need to upload a custom font, especially for the SAP-icons. But the requirements to create an enterprise-ready solution for that are larger than what we can fulfill in the short term.
What can be uploaded already is a company logo. This is stored together with the custom theme and available for the SAP Fiori Launchpad.
Guidelines
The same value help in Bluecrystal and Morning Horizon
Not immediately obvious, but for existing applications more than relevant, is the guideline that is associated with a theme (or again: with a theme family). It describes how parts of the UI should be laid out, and can change drastically between theme families.
The guideline affects for example
- the positioning of "closing actions",
- the height of table rows,
- the use of text instead of icons,
- the placement of alert messages or
- the whole structure of value helps.
From the perspective of the theming-base-content the guideline is just a single word at the right place (in the tags of a theme – here you also see that a guideline can span more than one theme family: Morning Horizon implements the Fiori_3 guideline that was introduced with Quartz and even retrofitted to Belize). But from the application framework perspective this guideline influences a lot of rendering decisions.
Implications for theming repositories
With theming parameters, assets and guidelines in mind, we can take a look at the structure of a theming-repository: the content of theming-base-content:
- Base/baseLib is the only framework and library in the theming-base-content, it serves as the root for all deriving frameworks, libraries and thus custom themes (e.g. custom themes of UI5/sap/m technically reference Base/baseLib).
- Inside is a long list of themes (with their technical ids):
- sap_horizon, which is Morning Horizon, next to
- sap_base_fiori, which is used by some frameworks as an abstract parent theme for the Quartz and Belize family, together with
- baseTheme, which is the "mother of all themes", where as many theming parameters and assets are defined and then shared with all other themes,
- and many many others.
- Inside a theme are
- parameter values in the base.less file,
- fonts and assets that apply only to that theme (or that theme family if they are referenced from a deriving theme), and
- the .theming file that describes the theme itself and contains e.g. the guideline information.
And then inheritance comes in to play and shared assets are stored at shared places. E.g. the 72 Font Family is not part of Horizon or Quartz or Belize theme family, but instead stored directly in baseTheme, because it is so central to the SAP Fiori experience. On the other hand, the Horizon family comes with a revised set of SAP-icons, so these are stored with Morning Horizon (as the base for Horizon themes).
This allows resource sharing and an efficient storage mechanism for SAP- and custom themes.
Wrap up
We saw that a theme is more than its parts, it consists at least of
- a set of theming parameter values,
- assets and
- the guideline.
This is reflected in the structure of theming-repositories like the content of theming-base-content, where inheritance and resource sharing make storing themes efficient.
Let's talk!
Let me know about your experiences with custom themes. Leave a comment on what parameters you are most likely to custom theme, or which assets you would really like to upload. I'm curious about your insights!
- SAP Managed Tags:
