Show TOC

CSS Classes for Theme ParametersLocate this document in the navigation structure

SAPUI5 provides a set of important adjustable colors behind the generic predefined CSS rules that enable custom content to use the respective CSS classes to get the correct colors.

The CSS of custom HTML or on-the-fly controls used by applications is not connected to the SAPUI5 theme parameters. So using the Theme Designer to adapt colors does not modify the colors of these parts. Instead, CSS classes must be used.

The CSS classes that are used in custom HTML content and in notepad controls are predefined and are supplied with color values by LESS CSS parameters of the current theme. The names of the CSS classes are generic and deduced from the respective theme parameter name.

Example

The most straightforward example is the theme parameter @sapUiText. The theme parameter is mainly used for text colors, so the custom CSS rule sets the color property. To generically derive from CSS parameters while not creating too long or conflict-prone names, every parameter sapUiXY can be offered as CSS class sapThemeXY. This suggests it is a theme color, and sapTheme is a new reserved prefix for CSS classes.

.sapThemeText {
   color: @sapUiText;
}

This solution is not sufficient if the same color is used for borders. In this case, the color is defined for each CSS color parameter once as text color, once as background color, once as border-color, and so on. The styled CSS property name is part of the CSS class name, as a suffix:

.sapThemeText-asColor {
   color: @sapUiText;
}
.sapThemeText-asBackgroundColor {
   background-color: @sapUiText;
}
.sapThemeText-asBorderColor {
   border-color: @sapUiText;
}

Nevertheless, if there is an obvious default CSS property such as the (text) color for @sapUiText or the background color for @sapUiPageBG, this one is available without suffix.

If an application is using SAPUI5, so a theme is loaded into the page, any custom content like plain HTML, HTML inside HTML controls or HTML/XML views, as well as HTML rendered by notepad controls can take part in theming when the respective generic CSS classes are added. When custom HTML should have the font color defined in the current theme, the application writes:

<span class="sapThemeText">some custom text in custom HTML</span>

Whenever the theme is switched or the Theme Designer is used to modify the standard text color, this span automatically gets the new text color. The same is valid when a notepad control is created. Just make sure the control writes the respective CSS class, for example by calling oRm.addClass("sapThemeText");):

// the part creating the HTML:
renderer : function(oRm, oControl) { 
    oRm.write("<div"); 
    oRm.writeControlData(oControl); 
    oRm.addStyle("width", oControl.getSize());  
    oRm.addStyle("height", oControl.getSize());
    oRm.writeStyles();
    oRm.addClass("mySquare");       
    oRm.addClass("sapThemeText");  // here the CSS class is added which makes the text color depend on the current theme
    oRm.writeClasses();             
    oRm.write(">");
    oRm.writeEscaped(oControl.getText()); 
    oRm.write("</div>");
},