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 Theme-dependent CSS-classes sample in the Explored section of the Demo Kit.