Setting different background for a theme on SAP Fiori Launchpad without customising a theme

In this blog, I want to share my recent experience in changing a form background to white for the sap_bluecrystal theme without customizing the theme.

Initially, when I got this requirement I don’t have any idea what to do with the requirement as I need to complete the requirement without creating a custom theme as I am a newbie to SAP FIORI.

Firstly I have gone through many of the Fiori/ SAP UI5 documents and got to know that Less parameters are used to apply our custom styles without customizing the theme. I have used the following piece of code and couldn’t achieve my requirement as I am using Less parameters, I was unable to clear the background for other themes.

html[data-sap-ui-theme = "sap_bluecrystal"]{
 background-color = white; 
}
html[data-sap-ui-theme = "sap_hcb"]{
 background-color = black; 
}

My second option is getting the current theme and applying the style class based on the theme. After doing lots of research, I found a piece of code to get current user and theme on Fiori launchpad.

var UserInfo = sap.ushell.Container.getService(“UserInfo”);
var User = UserInfo.getUser();
var Customtheme = User.getTheme();

With this, I am able to capture the current theme but the problem still exists as I am unable to capture the theme change. Later I found a theme-switch event sap.ui.getCore().attachThemeChanged that triggers when ever the theme is changed on the Fiori launchpad.  I have used the following code with in the callback event to achieve my requirement:

	sap.ui.getCore().attachThemeChanged(function() {
	//To get  the current theme selected by the user
	var UserInfo = sap.ushell.Container.getService("UserInfo");
	var User = UserInfo.getUser();
	var Customtheme = User.getTheme();
        // Applying custom css based on theme
	if (Customtheme === "sap_bluecrystal") {
	that.byId("grid").removeStyleClass("printAreaBox1");
	that.byId("grid").addStyleClass("printAreaBox");
        } else {
	that.byId("grid").removeStyleClass("printAreaBox");
	that.byId("grid").addStyleClass("printAreaBox1");
	}
	});

Hope it’s useful..!!

cheers 🙂