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 http://www.sap.com/roadmaps 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.