Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

Styling

How to customize and style UI5 Web Components. Covers CSS shadow parts, CSS custom states, CSS variables, and tag-level styling. Use when the user asks about changing component appearance, colors, spacing, theming, or overriding styles.
Success Message Strip
Customize UI5 Web Components appearance beyond defaults
Details
AuthorSAP SE

Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

CategoryTagplatform
Classification
TagPlatformTagSAP
Trust Level
TagSAP Certified
Tags
TagcssTagshadow-partsTagthemingTagcss-variablesTagcustomization
RepositoryUI5/webcomponents

Link Disclaimer

Some links are classified by an icon and/or a mouseover text. These links provide additional information.

About the icons:

Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

  • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
  • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

LicenseApache-2.0
Checks
Installation

Add to Joule Work WebTagComing soon

How to add to Joule Work Web

  1. On the skill's GitHub page

    Link Disclaimer

    Some links are classified by an icon and/or a mouseover text. These links provide additional information.

    About the icons:

    Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements with SAP) to this:

    • The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
    • SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

    Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

    , click Code → Download ZIP, then extract the archive.
  2. Open Joule Work Web.
  3. Go to your user settings and open Explore Skills.
  4. On the Skills Explorer page, click the Import button in the top-right corner.
  5. Follow the dialog to upload the extracted skill folder.

Install via CLI
npx skills add UI5/webcomponents --skill styling
Similar Skills
UI Theme Designer Design Tokens
TagSAPSAP SE

TRIGGER: questions about the SAP Design System and SAP Fiori design tokens — which themes exist, what value a theme parameter (e.g. sapButton_Background, sapHighlightColor) has in a given theme, how parameters inherit/extend across the theme chain, which parameters a specific UI component (UI5 control, UI5 Web Component, Fundamental Styles component) consumes. SKIP: how-to questions about UI theme designer as a product (creating, publishing, transporting themes — use ui-theme-designer-help).

TagSkillTagPlatform
UI Theme Designer Help
TagSAPSAP SE

Provides customer-facing UI theme designer help from help.sap.com (BTP / Cloud Foundry edition). Use whenever you need to check what is — or is not — documented for customers about UI theme designer: setup, user/role management, themes and theme sets (creating, editing, publishing, transporting, fallback), quick/detailed/expert theming, writing themeable CSS for custom UI5 controls, best practices for custom control theme files, theming integrations with Build Work Zone / S/4HANA / SAPUI5 / SAP GUI, UI theme designer service constraints (rate limits, size limits, theming-specific security and permissions, accessibility), theming error messages and troubleshooting, what's-new. Also use for 'is X documented?' or 'what does the help say about Y?' questions. SKIP: questions about which themes or parameters exist or what values they have (use ui-theme-designer-design-tokens). SKIP: tenant-specific operational questions about a running system ("which themes do we have?", "which users are assigned?").

TagSkillTagPlatform
CAP Add Remote Service
TagSAPSAP CAP Team

Add a remote service integration to an existing CAP Node.js application using the Calesi pattern. Imports external APIs (from other CAP apps or OData/S4 sources), creates consumption views, wires up delegation and data federation handlers, and validates the result with cds watch. Use when a developer wants to consume an external service in their CAP app.

TagSkillTagPlatform
CAP Developer
TagSAPSAP CAP Team

Expert guidance for building and extending CAP (Cloud Application Programming Model) applications in either Node.js or Java. Covers project initialization, CDS modeling, declarative annotations, and custom handler best practices for both runtimes. Use when building a new CAP app, extending an existing one, or reviewing CAP code for correctness and idioms — regardless of whether the stack is Node.js or Java.

TagSkillTagPlatform

Checks — Styling — SkillSpector