SAP’s intelligent enterprise delivers products and applications that are helping people get their work done faster, more easily, and with better outcomes”. For this, a modernized SAP Fiori design system enables SAP (and you!) to create business apps with an exceptional user experience that run on any device. This goes hand in hand with a new design and development culture here at SAP, which puts the focus on the user within every line-of-business solution.

What is Horizon?

SAP’s new design language is an evolution of SAP Fiori. Its new visual theme Horizon

• offers a modern and fresh look with a new vibrant color palette
• looks friendly and approachable by using rounded corners and softer shapes
• creates a sense of focus with more contrast, space, and visual hierarchy
• ensures an easy-to-learn and coherent experience across devices
• is ready for the WCAG 2.2 accessibility standard

Horizon comes with a family of themes:

• Morning Horizon (light version)
• Evening Horizon (dark version)
• High Contrast White (accessibility version)
• High Contrast Black (accessibility version)

SAP Fiori Manage Products app using the Morning Horizon theme

To find out more about the Horizon themes check this blog post: SAP Fiori Evolution: Horizon Now Generally Available in UI Technologies and Some Products. To learn how UI technologies support the Horizon themes, see SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori. Since I wrote that blog post, customer feedback has been implemented for the productive version available now.

What is new?

SAPUI5 1.102 supports productive usage of the Horizon themes. This means that applications using SAPUI5 1.102 have full SAP support and Horizon is no longer in status “experimental”.
Please note that consuming SAP solutions vary in their road map to adopt the Horizon theme. While this is implemented on SAP side, applications continue to show up with the current default theme ‘Quartz’.

Can I use the Horizon themes with open-source technologies?

SAP’s open-source technologies support the new Horizon themes:

• OpenUI5 1.102 fully supports the Horizon themes
• UI5 Web Components 1.4.0 fully support the Horizon themes
• Fundamental Library Styles 0.24 fully support the Horizon themes. Also see Fundamental Library Styles Updates, including theming aspects
• Fundamental Library for Angular 0.35 fully supports the Horizon themes

Stay tuned for news on UI theme designer and other UI technologies such as Web Dynpro ABAP and SAP GUI for HTML. For customers of SAP Mobile Services see What’s new in Mobile development kit client 6.2.

How to use the Horizon themes?

To use the new Horizon theme as a SAPUI5 developer, enable it for your app using data-sap-ui-theme=”sap_horizon” when bootstrapping SAPUI5 or configuring UI5 Web Components. Alternatively, use URL parameter …?sap-theme=sap_horizon when launching the app standalone which works for all UI Technologies. The theme IDs are

• Morning Horizon: sap_horizon
• Evening Horizon: sap_horizon_dark
• High Contrast White: sap_horizon_hcw
• High Contrast Black: sap_horizon_hcb

SAPUI5 bootstrap setting the Horizon theme of SAP Fiori

What to keep in mind?

Existing applications and extensions using standard SAPUI5 controls or SAP Fiori elements will work with the Horizon theme, without the need for technical adoption effort. Only if you have built your own custom controls, or you have your own CSS (which we advise against), you will need to check whether they maintain design quality with the Horizon theme. (These are the same conditions as with the introduction of the current Quartz theme which came with SAP Fiori 3.)