Theming

A Web Component carries no theme of its own, only the CSS custom properties the currently loaded theme package sets, read the same way whether the host page is plain HTML, React, Angular or Vue: there is no SAPUI5 shell to route theming through, so the mechanism is CSS variables a page can override rather than the framework's LESS build.

Showing artifacts, examples and content with confirmed Web Components applicability. View All UI5

Overview

SAP SHIPS

Ships eight theme IDs across the Horizon and Quartz families, sap_horizon (Morning Horizon) the default, switched at runtime with setTheme from @ui5/webcomponents-base or a sap-ui-theme URL parameter before load; theming itself is built entirely from CSS custom properties.

Not covered: A custom theme is not authored in place: it comes from exporting a css_variables.css file out of the UI Theme Designer, an SAP BTP-hosted tool, and linking it into the page, or from installing @sap-theming/theming-base-content to change the source .less file by hand and compile it to CSS.

SourceConfiguration | UI5 Web Componentschecked
THE COMMUNITY ADDS

No community artifact is documented here.

Artifacts2

2 of 2 artifacts
ArtifactSignals
Packages2
@sap-theming/theming-base-contentColour, font and metric definitions of the SAP themes
Signals
none
@ui5/webcomponentsSAP's UI elements as standard custom elements
Signals
Functional boundary

Details

Coverage
statecore only, UI5, Web Components
assessed
SourceConfiguration | UI5 Web Componentschecked SourceUI Theme Designer | UI5 Web Componentschecked SourceCustom Themes | UI5 Web Componentschecked
For your agent