Skip to Content
Product Information
Author's profile photo Thomas Reiss

Next step of SAP Fiori 3 available: Quartz Dark theme

With the availability of the Quartz Dark theme we take the next step on the SAP Fiori 3 journey, evolving the award-winning SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device. This first version of the theme is included in SAPUI5 1.72 and is available with SAP S/4HANA Cloud 2002.

In August 2019 we introduced the Quartz Light theme as part of the first step on our SAP Fiori 3 journey. Now the next step becomes available to users of SAP S/4HANA Cloud 2002: the new Quartz Dark theme.

The Quartz themes have been defined based on feedback from our customers in collaboration with SAP’s product development units. They get their name from the quartz minerals which have a lean and pure appearance in both light and dark variations.

The new SAP Fiori 3 theme “Quartz Dark”

The new Quartz Dark theme is an additional theme created for SAP Fiori applications to work in environments where low light is necessary or unavoidable – or where users simply prefer to work with a darker design. The dark theme also ensures a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Quartz Dark is suitable when

  • Working at night
  • Low lighted factory or other types of environment
  • Working outside at night using mobile devices

Here you see the new theme applied to an SAP S/4HANA Cloud 2002 home page:

The next example shows the app “Procurement Overview”:

And finally, here is an example of an SAP Fiori analytical list page, used by the Monitor Purchase Order Items app:

The Quartz Dark theme is not to be confused with the High Contrast Black theme, one of two themes we provide for accessibility, i.e. for visually impaired users; the other such theme being High Contrast White. Nevertheless, the Quartz Dark theme does support the minimal contrast requirements of the Web Content Accessibility Guidelines 2.1.

The themes now available with SAP Fiori

SAP Fiori as standard now provides a number of themes for customers to choose from: the new ones with SAP Fiori 3, Quartz Light (the standard theme now) and Quartz Dark, as well as those from SAP Fiori 2.0, Belize and Belize Deep, along with the two high contrast themes High Contrast White and High Contrast Black. The following diagram shows these schematically.

Custom themes

Customers can apply their own branding by adapting the standard SAP Fiori theme, SAP Quartz Light. Some customers will simply replace the logo or change the main branding colors of the UI by replacing the default brand and base colors of the theme. Other customers want more control to change the colors of the UI controls. Some companies even create multiple themes to reflect the various sub-brands of their different divisions.

The UI Theme Designer is the tool to use to create custom themes, for many SAP UI technologies such as SAPUI5 and the classic UIs (SAP GUI and WebDynpro). It allows customers to easily change a few basic colors (quick theming) as well individual control colors (detailed theming). The following diagram shows schematically an example of a greener branded version of the Quartz Light theme.

Quick Theming

Customers can easily change the logo and a few colors in the UI by replacing the colors in the UI theme designer. This automatically creates a recalculated tonal color palette that is applied to various UI elements, creating a harmonious look and feel.

One of the main parts of a corporate branding guide is a set of primary and secondary branding colors. When creating a custom theme, these colors can simply be added to the custom palette of the UI theme designer, making it easy to replace the default SAP Fiori colors.

The following example shows a combination of quick theming changes with some detailed parameter adaptations to the shell header and background image and gradient.

Note that this first version of the Quartz Dark theme cannot be used as a basis for custom themes. However, SAP does currently plan to allow custom theming via the UI Theme Designer for the final version of the Quartz Dark theme.

Further information

To learn more about theming, have a look at the theming section of the SAP Fiori design guidelines, as well as the UI Theme Designer SAP Community topic page.

If you want more information on SAP Fiori 3 plans, a great way to get an overview is via the openSAP course Intelligent Enterprise User Experience with SAP Fiori 3 (one week with five units of 15 minutes each). You can always find out more about our plans in the SAP Fiori Road Map, which can also be found on by searching for “Fiori”.

Finally, if you want to see some examples of how SAP Fiori helps users get their work done more easily, keep an eye out in the next weeks for some new videos in the playlist SAP Fiori 3 User Experience for SAP S4/HANA.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Roshan Kumar Gupta
      Roshan Kumar Gupta

      Nice blog, new theme looks attractive and appealing.

      Author's profile photo Christian Köhler
      Christian Köhler

      Thanks for this blog and the good news.

      Is there a plan to get it on normal SAP Fiori FES-systems (non cloud)? If yes, will it be downported for example to use it with FES 6.0 and SAP_UI version 7.54?


      thanks and best regards


      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Christian,

      At the moment we do not plan to downport it for use with SAP Fiori front-end server 6.0, but of course plans can change in the future.



      Author's profile photo Jens Schwendemann
      Jens Schwendemann

      That's a shame. However am I right in the assumption, that the dark theme (as other themes) are technically speaking solely dependent on the SAP_UI component version? So when we are talking a future SAP_UI 7.55, why wouldn't we be able to install this on top of FES 6.0 like we can with other AS ABAPs?

      In my opinion the notes and are a bit contradictory

      That being said I would love to see this in FES 6.0 and not wait for FES 7.0 (should that even come to happen)

      Author's profile photo Christian Köhler
      Christian Köhler

      SAP Quartz Dark is now in experimental status included in SAPUI5 1.71 library ( I can confirm this with a normal netweaver gateway FES6.0 system and library 1.71.19.

      At the moment, and as the linked note says, it should not be used in productive systems. The group names in launchpad e.g. are black. Black on dark background does not work very good. ?

      The apps (I only tested some HCM apps) seem to have no borders. Thanks anyway for going this step.

      I hope there will be a productive version in near future.


      best regards

      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Christian,

      I am happy to inform you that our plans did indeed change, and we have now down-ported the Quartz Dark theme to SAPUI5 1.71.27, as communicated in my blog post Quartz Dark theme has been down-ported – now available for SAP Business Suite via SAP Fiori front-end server 6.0



      Author's profile photo Sagar Shimpi
      Sagar Shimpi

      Elegant design and a very informative blog

      Author's profile photo Michael Schliebner
      Michael Schliebner

      <3 Quartz Dark my favorite theme, thank you!

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      In the WebIDE you can run (test) applications as SAP Fiori Launchpad Sandbox.

      Is there any way you can change the theme in that Fiori Launchpad?

      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Jeroen,

      In the meantime we support this via a setting in the SAP Business Application Studio: when generating your Fiori application, on the final step, if you chose advanced options then you can switch theme.



      Author's profile photo B@lu .
      B@lu .

      hi Thomas Reiss,

      thanks for valuable information.

      being a Developer I wanted know all the list of theme names . I tried but didn't find exactly. where can we find list of all available theme names for SAPUI5 and from which SAPUI5 version that particular theme exist.

      thanks in advance.





      Author's profile photo Thomas Reiss
      Thomas Reiss
      Blog Post Author

      Hi Balu,

      You can find this information in the documentation here: Supported Combinations of Themes and Libraries - Documentation - Demo Kit - SAPUI5 SDK (