There are several different types of buttons you can add to the Shell Header: https://sapui5.hana.ondemand.com/sdk/#/api/sap.ushell.renderers.fiori2.Renderer%23methods/Summary
For my test I choose the “addHeaderEndItem” Button. Add the fowlloing logic in the Component.js file to create the button and the logic for switching the theme:
_addHeaderButton: function () {
const oRenderer = sap.ushell.Container.getRenderer("fiori2");
oRenderer.addHeaderEndItem("sap.ushell.ui.shell.ShellHeadItem", {
id: "toogleTheme",
icon: "sap-icon://circle-task-2",
visible: "{device>/orientation/landscape}",
tooltip: "Switch Theme",
press: (oEvent) => {
const toogleButton = oEvent.getSource();
if (toogleButton.getIcon() === "sap-icon://circle-task-2") {
sap.ui.getCore().applyTheme("sap_fiori_3_dark");
toogleButton.setIcon("sap-icon://circle-task");
} else {
sap.ui.getCore().applyTheme("sap_fiori_3");
toogleButton.setIcon("sap-icon://circle-task-2");
}
}
}, true);
},
Afterwars you need call the method in the init() function of the component. No reload the app and you will find the new button in the top right corner. Pressing will switch the theme to dark or back to light theme.
