SAP Fiori’s new UI theme horizon

Time:2022-3-29

SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori
Sap is transforming our design and development culture to focus more on helping people get things done faster and easier and achieve better results. If you haven’t read the relevant content, please read this blog post by Benedikt Lehnert, our chief design officer, before continuing to read:How we experience in SAP

SAP’s new design language is the evolution of SAP Fiori. The new visual theme horizon paves the way for a modern friendly user interface based on an accessible modular design system. Among other things, the planned new horizon themes include:

  • Attractive and fresh palette in line with web content accessibility guidelines
  • A bold and adaptive structure of information with a sense of contrast
  • Rounded corners create a friendly and approachable modern appearance
  • A mobile first method to reduce cross device learning curve
  • A new set of icons can clearly convey and feel modern

SAP Fiori's new UI theme horizon

Figure 1: my home page from

The above figure is the home page of SAP s / 4hana cloud 2111. Log in using the purchase business role. Opened the horizon preview theme.

How do SAP’s UI technologies support the Horizon visual theme?

SAP strives to provide a consistent user experience across solutions and across UI technologies. SAP Fiori DNA is built into the foundation of all web developers through a common theme, making it easier to build new SAP Fiori applications. The common theme library is the key to reuse and unify the theme appearance and its color and measurement. Therefore, SAP can quickly introduce the horizon theme and correctly focus on various UI technologies.

UI theme designer and HTML based UI framework (such as sapui5 / openui5, ui5 web components and fundamental library) are based on theme basic content, which provides all relevant theme parameters as modern CSS variables. By customizing these parameters through the UI theme designer, you can create custom themes based on SAP’s standard themes.

SAP ui5 support for horizon theme

  • Sapui5 1.93.3 and 1.96.0: support experimental preview version to collect user requirements
  • Ui5 web components 1.0.0 for use in angular and react.

How to enable the horizon theme

For end users, select directly from Fiori launchpad.

For developers, in index Add a line of code to HTML:

data-sap-ui-theme="sap_horizon"

SAP Fiori's new UI theme horizon

More Jerry’s original articles are: “Wang Zixi”:
SAP Fiori's new UI theme horizon