list-of-supported-css-classes-91a4946.md

List of Supported CSS Classes

Overview of the CSS classes currently supported by SAPUI5.

CSS Class Name	CSS Property	sap_bluecrystal	All Themes	Description
sapThemeFontFamily	font-family	X	X	Default font
sapThemeFontSize	font-size	X	X	Default font size
sapThemeFont	font-family+font-size	X	X	Default font and font size
sapThemeText	color	X	X	Default text color
sapThemeText-asColor	color	X	X	Default text color
sapThemeText-asBackgroundColor	background-color	X	X	Default text color
sapThemeText-asBorderColor	border-color	X	X	Default text color
sapThemeText-asOutlineColor	outline-color	X	X	Default text color
sapThemeTextInverted	color	X	X	Default color of inverted text
sapThemeTextInverted-asColor	color	X	X	Default color of inverted text
sapThemeBaseBG	background-color	X	X	Base color for all backgrounds
sapThemeBaseBG-asBackgroundColor	background-color	X	X	Base color for all backgrounds
sapThemeBaseBG-asBorderColor	border-color	X	X	Base color for all backgrounds
sapThemeBaseBG-asColor	color	X	X	Base color for all backgrounds
sapThemeBrand-asColor	color	X	X	Brand color
sapThemeBrand-asBorderColor	border-color	X	X	Brand color
sapThemeBrand-asBackgroundColor	background-color	X	X	Brand color
sapThemeBrand-asOutlineColor	outline-color	X	X	Brand color
sapThemeHighlight-asColor	color	X	X	Color for highlighted elements
sapThemeHighlight-asBorderColor	border-color	X	X	Color for highlighted elements
sapThemeHighlight-asBackgroundColor	background-color	X	X	Color for highlighted elements
sapThemeHighlight-asOutlineColor	outline-color	X	X	Brand color
sapThemePageBG	background-color	X	-	Background color of mobile pages
sapThemePageBG-asColor	color	X	-	Background color of mobile pages
sapThemeBarBG	background-color	X	-	Background color for header bars in mobile pages
sapThemeBarHeading	color	X	-	Header text color for header bars in mobile pages
sapThemeBarText	color	X	-	Normal text color for header bars in mobile pages
sapThemeNegativeText	color	X	-	Semantic negative text color
sapThemeCriticalText	color	X	-	Semantic critical text color
sapThemePositiveText	color	X	-	Semantic positive text color
sapThemeLightText	color	X	-	Light text color
sapThemeMediumText	color	X	-	Medium text color
sapThemeDarkText	color	X	-	Dark text color

You can also check the availability of the sapTheme classes across the predefined themes Blue Crystal and High Contrast Black (HCB) in the sample in the Demo Kit.