Product Information
New SAP Fiori User Experience – Horizon visual theme
New Theme Available for SAP Fiori User Experience (Experimental)
We have introduced a new theme, the preview version of the Horizon visual theme for SAP Fiori (theme ID: sap_horizon
), as an addition to the existing themes.
To preview the new theme, see https://sapui5.hana.ondemand.com/?sap-ui-theme=sap_horizon#/controls.
How to use the Horizon visual theme?
Sample Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{appTitle}}</title>
<script>
window['sap-ushell-config'] = {
defaultRenderer: 'fiori2',
applications: {
'fe-lrop-v4': {
title: 'Credits',
description: 'SAP Commissions',
additionalInformation: 'SAPUI5.Component=project1',
applicationType: 'URL',
url: './',
navigationMode: 'embedded'
}
}
};
</script>
<script src="https://ui5.sap.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
<script
src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.ushell, sap.fe.templates"
data-sap-ui-compatVersion="edge"
data-sap-ui-theme="sap_horizon"
data-sap-ui-frameOptions="allow"
data-sap-ui-bindingSyntax="complex"
></script>
<script>
sap.ui.getCore().attachInit(function() {
sap.ushell.Container.createRenderer().placeAt('content');
});
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
SAP Commissions in Horizon Theme
SAP Commissions in Fiori 3 Theme
Final Look of Horizon Theme with all Fiori Elements
References
SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori
The Experience Mindset — Redesigning How We Build Products at SAP
I wonder if next year there will be a new exciting theme which will change the line at the top from a white background to a black background, and add a circle around the "About" icon.
Several times in it's history Oil Company BP has employed a team of consultants to redesign its logo. Each time it pays the consultants mega millions for the new design, and then has to spend many more mega-millions changing the logo on all its petrol stations, oil rigs and so forth. That is why it never has any money left over to spend on the transition to renewable energy.
BP logos
Is this a kind of new High Contract theme? Or just another theme?
Hi Jeroen Vanattenhoven
Its just an another theme for all fiori elements for user experience.
Is dark mode coming for horizon theme?
Hi Rahul Agarwal
you will have to customize the appearance of the theme to make it dark mode from Avatar dropdown.
Examples for Horizon elements is in below link
https://ui5.sap.com/?sap-theme=sap_horizon#/controls
Yes, dark mode is coming, see comments in SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori
Rahul Agarwal Oliver Graeff
Dark mode preview is here (data-sap-ui-theme="sap_horizon_dark")
this is not a dark theme
and I believe this base theme(or Themeless UI) will come if there is no theme applied or an incorrect theme applied
https://github.com/SAP/openui5/tree/master/src/themelib_sap_horizon/src/sap/f/themes
https://github.com/SAP/openui5/tree/master/src/themelib_sap_fiori_3/src/sap/f/themes