Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
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 🙂
2 Comments
Labels in this area