Skip to Content
Product Information
Author's profile photo Oliver Graeff

Horizon theme of SAP Fiori: update on productive usage for web applications

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?

The new modern Horizon theme is an evolution of the SAP Fiori design system. The theme

  • 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%20Fiori%20Manage%20Products%20app%20using%20the%20Morning%20Horizon%20theme

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?

pointing%20handSAPUI5 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:

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%20bootstrap%20setting%20the%20Horizon%20theme%20of%20SAP%20Fiori

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.)

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Morten Prom
      Morten Prom

      Very good news Oliver! We've been waiting for the Horizon Theme to grow up 🙂 The power of UI5 Themes first shows it's real power when you customize them to adopt customer colors. When will the Horizon themes be available in the SAP UI Theme Designer.

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      Yes, you are absolutely right with regards to custom themes. The UI theme designer team is already working on this, and you can expect more news later this year. (As usual, please treat this statement with the disclaimer that it is a forward-looking and thus subject to change.)

      Author's profile photo Holger Schäfer
      Holger Schäfer

      Hi Oliver,

      thanks for the good news concerning productive availability of the SAP Horizon theme.

      Our BTP solutions depend on the SAP UI Theme Designer allowing customer specific themes in our SaaS Solutions, so this is also a must have for us to be able to use the new theme.

      +1 -> Voting for Morten's request!

      Best regards
      Holger

       

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      Here we go: The Horizon themes of SAP Fiori are available now for theming with the UI Theme Designer.

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      You may watch it in this video.

      Author's profile photo Ravid Aloni
      Ravid Aloni

      Sounds promising!

       

      1. Is there a plan to use / integrate supernova.io as a design system?
      2. Currently, with Fiori it is possible to adjust the theme, but it is very tedious to transfer them to the Figma Kit. Is it going to be improved with Horizon?

      Best

      Ravid

      Author's profile photo Kavya Bhat
      Kavya Bhat

      Thanks for the update, Oliver!

      I was wondering if there is a way right now to switch to any of the Horizon theme flavours(Morning, Evening, etc.) on the UI5 documentation site(OpenUI5)? Currently, I only see 'Horizon' in the theme switcher settings.

       

      Regards,

      Kavya

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      Hi Kavya,

      right now kindly use the URL theme parameter. But as the themes are now available for productive usage, they will be added to the Demo Kit. The team is already working on that and it is planned to be available with UI5 1.103 (As always: this is a plan, subject to change).

      Thanks,
      Oliver

      Author's profile photo Kavya Bhat
      Kavya Bhat

      Thank you, Oliver! Looking forward to it!

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Oliver,

      I've tried the sap_horizon_dark but unfortunately the placeholders that show up during the load of the list view are not yet adjusted to the dark theme. So it's quite flickery. Do you know if this is a known issue?

      Best Regards
      Gregor

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      Hi Gregor,

      thanks for your feedback, as always! I double-checked with the team lead and this needs to be fixed. We kindly ask you to create an incident, so we can communicate with you and efficiently handle it between involved teams. Thanks a lot!

      Best regards,
      Oliver

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Seems that the theme was updated and the issue is solved.

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      Thanks for the notification!

      Author's profile photo Michael Hering
      Michael Hering

      Hi Oliver,

      the new horizon theme looks and sounds very promising!

      Do you have some further details in regards to the WCAG 2.2 accessibility standards? What are the improvements compared to the currently available themes (e.g. Contrast, Keyboard Support, Screen Reader Support)?

      I would appreciate some information even if it is only planned so far.

      Thanks and best regards

      Michael

      Author's profile photo Janina Grimm
      Janina Grimm

      Hi Michael,

      Thank you for your feedback!

      Compared to older themes, the (keyboard) focus appearance is a major improvement for WCAG 2.2. The visual affordance have been enhanced, and there is a consistent color and style throughout the controls for the light and dark theme.

      In addition, semantic icons for controls like the progress indicator have been introduced to provide another distinguishing feature for users with visual impairments. Another improvement that works regardless of color is the rating indicator, where the stars are now offered in different sizes depending on whether they are selected or not. Another improvement for different shapes between states is seen in the read-only state compared to the editable field. The shape change allows a clearer distinction at first glance.

      Also, a line height of 1.5 has been added for long continuous texts that are divided into multiple lines, such as a text area.

      I hope these examples give you some insights for improving accessibility based on the WCAG 2.2 working draft.

      Best regards,
      Janina

      Author's profile photo Ravid Aloni
      Ravid Aloni

      Is the Horizon theme available for On Premise as well?

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      Kindly see a respective sentence in Horizon themes now available with the SAP Launchpad service and SAP Work Zone.

      Author's profile photo Ravid Aloni
      Ravid Aloni

      Are there some reference SAP Apps that have been designed with the Horizon Theme, that we can inspect in a browser?

      Author's profile photo Oliver Graeff
      Oliver Graeff
      Blog Post Author

      The application coding and application interaction behaviour should be independent of the theme. An application is designed independent of the theme a customer applies. You may switch on the Horizon theme for apps, e.g. for SAPUI5 demo apps in SAPUI5 Demo Kit. Or in other products.

      Author's profile photo Ravid Aloni
      Ravid Aloni

      Thank you very much, liver!
      I found under the link a great collection:
      https://ui5.sap.com/test-resources/sap/suite/ui/generic/template/demokit/sample.manage.products.sepmra/test/index.html?sap-ui-theme=sap_horizon#Shell-home