{"ref":"capability:ui5-theming","page":"/capabilities/ui5-theming","json":"/capabilities/ui5-theming.json","generated":"2026-10-26","drafted_with_ai":true,"entity":{"id":"ui5-theming","name":"Theming","domain":"ui-and-frontend-bridge","ecosystems":["ui5"],"universal":false,"description":"Applying a consistent visual identity across every control, including the parameters an app may read and the custom themes an organisation may build.","short":"Consistent visual identity across controls, including custom themes","core_coverage":{"state":"core-only","assessed_at":"2026-08-31","what_core_does":"Themes are CSS built from LESS with theme parameters; the framework ships the SAP standard themes and a theme designer path for custom ones.","sources":[{"url":"https://ui5.sap.com/#/topic/497c27a8ee26426faacd2b8a1751794a","title":"SAPUI5 — Theming","checked":"2026-08-31","quote":"SAPUI5 is an HTML library, therefore styling is done using Cascading Style Sheets (CSS)."}],"community_adds":"SAP publishes the theme parameter values separately from the framework, in [@sap-theming/theming-base-content](artifact:sap-theming-base-content), as Less, CSS variable, SASS and JSON sets that a custom theme from the UI Theme Designer connects to."},"coverage_by_flavor":{"web-components":{"state":"core-only","assessed_at":"2026-09-14","what_core_does":"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.","where_it_stops":"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.","sources":[{"url":"https://ui5.github.io/webcomponents/docs/advanced/configuration/","title":"Configuration | UI5 Web Components","checked":"2026-09-14","quote":"The `sap_horizon` is known as `Morning Horizon` and it's the latest theme and default theme."},{"url":"https://ui5.github.io/webcomponents/docs/advanced/theming/","title":"UI Theme Designer | UI5 Web Components","checked":"2026-09-14","quote":"Copy the `css_variables.css` file with all CSS Variables for your custom theme to your project."},{"url":"https://ui5.github.io/webcomponents/docs/advanced/theming-part2/","title":"Custom Themes | UI5 Web Components","checked":"2026-09-14","quote":"The theming of the UI5 Web Components is based entirely on CSS variables. Instead, it's best to change the source `.less` file (also available in theming-base-content), change some `Less` variables and compile it to CSS."}]}},"framing_by_flavor":{"web-components":{"description":"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."}},"history":[{"date":"2026-09-14","field":"coverage_by_flavor.web-components","from":null,"to":"core-only","reason":"Assessed from the ui5-webcomponents documentation site (Configuration, Theming, Custom Themes): the framework ships eight theme IDs and setTheme itself. No artifact in the graph states the web-components flavor for this capability, so the state rests on the framework's own docs rather than a provides edge — openui5-core is the only provider on the door and its flavors entry states freestyle only."},{"date":"2026-09-14","field":"framing_by_flavor.web-components","from":null,"to":"CSS custom properties a host page reads or overrides, no SAPUI5 shell to route through","reason":"The mechanism reads as a different paragraph from freestyle's LESS-in-a-SAPUI5-shell model: a Web Component is consumed from plain HTML, React, Angular or Vue, so what theming IS here is the CSS variable a host page can set, not a control reading a LESS-compiled parameter."},{"date":"2026-10-26","field":"core_coverage.community_adds","from":null,"to":"SAP publishes the theme parameter values separately from the framework, in @sap-theming/theming-base-content...","reason":"Reassessed against the graph (check:capabilities): sap-theming-base-content is an SAP-official package providing this capability, and the core block never named it. State stays core-only: the new providers are SAP-origin."}],"drafted_with_ai":true},"sap_delivery":{"door":"ui5","all":{"built_in":[],"documented_pattern":[],"announced":[],"packages":[{"ref":"artifact:openui5-core","name":"@openui5/sap.ui.core","json":"/artifacts/openui5-core.json"},{"ref":"artifact:sap-theming-base-content","name":"@sap-theming/theming-base-content","json":"/artifacts/sap-theming-base-content.json"},{"ref":"artifact:ui5-webcomponents","name":"@ui5/webcomponents","json":"/artifacts/ui5-webcomponents.json"}]},"by_flavor":{"freestyle":{"built_in":[],"documented_pattern":[],"announced":[],"packages":[{"ref":"artifact:openui5-core","name":"@openui5/sap.ui.core","json":"/artifacts/openui5-core.json"}]},"fiori-elements":null,"web-components":{"built_in":[],"documented_pattern":[],"announced":[],"packages":[{"ref":"artifact:sap-theming-base-content","name":"@sap-theming/theming-base-content","json":"/artifacts/sap-theming-base-content.json"},{"ref":"artifact:ui5-webcomponents","name":"@ui5/webcomponents","json":"/artifacts/ui5-webcomponents.json"}]}}},"edges":{"use_cases":[],"shared_tasks":[],"related_tasks":[],"options":[{"ref":"artifact:openui5-core","name":"@openui5/sap.ui.core","json":"/artifacts/openui5-core.json","ecosystem":"ui5","origin_ring":"sap-official"},{"ref":"artifact:sap-theming-base-content","name":"@sap-theming/theming-base-content","json":"/artifacts/sap-theming-base-content.json","ecosystem":"ui5","origin_ring":"sap-official"},{"ref":"artifact:ui5-webcomponents","name":"@ui5/webcomponents","json":"/artifacts/ui5-webcomponents.json","ecosystem":"ui5","origin_ring":"sap-official"}],"samples":[{"ref":"artifact:sap-samples-ui5con-2025-theming-workshop","name":"SAP-samples/ui5con-2025-theming-workshop","json":"/artifacts/sap-samples-ui5con-2025-theming-workshop.json"}],"explained_by":[{"ref":"content:devtoberfest-2026-sap-themes-with-coding-agents","name":"Bringing SAP themes to any web app with coding agents","json":"/content/devtoberfest-2026-sap-themes-with-coding-agents.json"}],"normative_context":[]}}