[DynamicPage | Theming]: The action button icon color of the dynamic page cannot be overridden

[hirakshetry]

Bug Description

We overridden the button theme at the root level, which causes the theme to apply partially to the dynamic header actions—specifically, the button text color is affected. Our goal is to style only the dynamic header action buttons, but this isn’t possible because UI5 web component uses private CSS variables (e.g., --_ui5-v2-11-0_dynamic_page_header-actions-background and --_ui5-v2-11-0_dynamic_page_header-actions-color). Since these variables are private and not intended for theming, creating a custom theme for dynamic page header actions is not feasible.

:root {
 --sapButton_Background:red;
 --sapButton_TextColor: white;
 --sapButton_Lite_TextColor: red;
 --sapLinkColor:green;
}

replicate steps: https://ui5.github.io/webcomponents/play/#eNrtXFlTIzkS_isazwt0IB8cDZgjlnN7YultYqB7d2Po6JCrZJcalVSjkk2zHfz3zZSqXPIFBpaXiQoI48rKW6n8xEPqZ0OomP9oJjaVje7PhmIpb3RD4loj0spyZYG8_wulJJPsfmD0UMW0r2VMKD28Ufu_nH46uf7P5RlBISTgXyKZGhzcNLi6aQCt_NlPOIvhmcDvfm7vJceHd12l7Uo35n2heLxKfgItFjma6xKlFd8DwgPKOxvufV-biMc00lIbyuLvw9xO8JL9Vqn_L29uP-WWkShhJucWkv75-pzuuLwXr3BtgT4S_C7Txt40SLGyQLwTsU0OYj4SEafuYY0IJaxgkuYRk_yg02wXyqywYPOKpZnk-y3_hHQp1C0xXII651aecI5WEsP7QGu2UiZUM8pzp2e_VVQBfO3p-J44GeBLuBgkEOh2u5392CM9Ft0W5eYS0SUjZlYozVl2PH51gm9WC__mFCnlqihUZBiKLRrfQzpERDM24ETEYBe_gbd5ou9ARltuFrBTFzLJpcbMuYcjw1lhHbl78BhHZpj28pItIM1npMLytMzVr8DzkUGO5jEtJX2VaJ6_Qv73oVJCDchTeqbfBDmbSBMuNuhDzzIeQVmR0IJXU5YSKojFqBTNFcsyHn8oNZBIsjyvXng5WlkoHWAjZpmBFWUZFlb-55AZXGIBdQ_PkmVWZ24b4AbLo4S7DXIURbAptrAWxH-RcAU6vYde4-FkhHcG3ADL1N47O_-EHbpUnJA9CLMIOBuHO-wlM6Fa_gO20uHlJ7q5s_N-a7-VHU4K-VRcLS07DoENpuPfBtknYupsbTc3P5Kzz78XEbFBqFNr2YPElw6wyAqt8mNmMPlxRbn2jJhpH8YEZ8xzMcCFujZM5RmsnbLB6hZWaG9orVYEowTeEyhFy8cLNsm0SNb5xGNhC8JC46WVM-B9po3HFV6y_HGvQ_ojqVZsJAYMk3gc5nWa_LzULnC92EawvQz__ySj0OirgAKMWSjB_BlpKQiz3XpRK8fdwk3YpLgJmjl2oTK1mdHxMLJUqL6ebTK-rN13ByKvbDkX81rOIm9oxKUMXJKsx-Xh0YgJ-CaksPdelaf7vhE2B8ICVtDzmyJXVke3ZZcputRzHbg0cJh4wnKGPCC5sb3b3N0ln69OX23UcZBTnkdGZFhIT7rgdcaVBHa6YcYNlXgUuXMHEhIN8wTeYSsHkYzLnNzrIR7S7piJSd_oFM-72HyJ1fDLqe73CVBIwnLCSB_2-Bpxnfqe9DmXzZlYqy8LKjWoYylySzyVll3Eh5KTlc4GnIZIqmOHX-CS5Fdc8ijc5VKQIGbg-3BN19vtTrC1pUgpMwZORAZzULxxpykWQw8EOTggFtY3t5vtNmIC2Oi04fgYJeQSDpqsByB5-uW0WAfxZg6sb-5WHmx7B_4lnAnOVegKuYTzIez7O_LxcmMpvzrrWy_2azfMzFFujSYXrhEAjnbev7n597PmLxPAc7K06fUXr8g27urC8jAWuvUF1kOTE7cQ_xCWULKZLuXG-9dUJmRgt8zAMWcpOYYefwsFcEw7b24d87-1wPr6m1vfAes7C6xvvPmW7Kytb7Wr6puyv7mU_Z3X2d_ZqeyfsDTSBhH_C_wX_ObR7-6-D2NXMRtv_M32zlLm2-32xouDDzf-Cc-YJde48SzptJtbbx59jQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQc1HtR4UONBjQd_fTzovKbygk33d8liwaw25OO_Jwy3ytGJYJICB6iKCSA_-OkngKoppXOpGY4inbu34fxmMD-WsxGn3A2Gldo4Tqa6EdtQ21maJQznfGKcMwGpYohycmIqVB0xFXH5iPLDE6nzWT2tIrr5IyWLhmX9oCzZ90tDignAVMdD6QZkTYSPOMv73c9meUY304uTvH6mt1UOgj8yjtt4WCsVBcPnJSWcPG-9C3Uk0NTJu9aNEilOMhMcLg5e58MMyc69vRs1K-vsT8j_DZLTuuO9SANFgc2c9oU2ohVDqbROfdYuIWml0udLXuMc2svFP7hJn1L-UQ1e9piZJax53gscjlqa-5oNluY9rkaDXyLzm-Xp8n4tmeGC208NPpf_2G2vpaWO3Pje8qE_T_sFfDyLGfN5ZRkgg4mXqiWKDbdQMDWXuUwtB9JuTvSZMn5esnL0RuE7S-JqX5ADEutomIJo888hN_d-zk2blZvGdMe7aazulSqwmfpsP6bh14mp4NW9ygXfk3EQ-FH5idZdWUeweFI2QBRvufK5CfB3NgIpXFSuOPJHUkS3N401srJKDg79DRNB44JlO7LWCAiGr-DY7vieA5SxZsjRyIO39Efp4FoQ6NdmX5szFiUrBTgVVnovdcnwVI_4Qq9W3T0XhVdjrIjyGbBAUogWXQMa3Icz6S-LcE5-q-6M6Boe7029vYaTxIm_ZeIuEZZPv78AWsgUqrgQ6taTB_jvH3qNmWy6IdOJ6z6EkkJx2pM6ut1z93woS_FAENxtcQ60KyCtjhn6kDZ5P8Vy7oiOafp2jLGb7q2zWF6tobRJmUSyi5LmGYvAeGY4RT73Ao6tFG8B6BK83eGWIsGZGZoc7WBY-JwyMxCqS9oTAXeVTajuu-sDVtb9dSeek0reBxc2Ye3HEuFY72Sq-pL_cBmAv4U7-Dlf8o9qXvrr2vTL5szscOiU8YlZ916V1J6GVU-7pINkMs9mpWjG5QE6u5VV7sfCcNdBu7hWw1TNRBEch-dVjPfsh7-fpUs23AUppY5whru4PWZcVZ1mGdh0kVzqHE7RIz5RLKVTIuLLa5qjobrNwanJ8MiuBlAqzR1QQtrw0wnLYOKWgkUSVZ3Nvf5j_lowCUdvd2lJDsmHJsENkjMXPS6I4ZJhHrzyBarD-vIRjeVZL4cl9Q0DEGu8HR7T5EhfqwzPbPBPve9QMP7g980dbr49sefnSEy2gSCjG531rTCpc9vQHIVXPqKJBoVbnkIrN32p77oE9oTIcpG7goV9VBRse29RF2g8PPwPKwQTGQ

Affected Component

No response

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.16.2

Browser

Chrome

Operating System

all

Additional Context

Organization

SuccessFactors

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[Vonahz]

Hi @hirakshetry, thanks for your feedback!

UI5 Web Components use global theme variables, so changing one of these variables (for example a button background or text color) will also affect all components that rely on the same variable. This is expected, because the theming system is designed to ensure visual consistency across the whole application.

If you want to style only a specific element—for example buttons inside a Toolbar—without impacting other controls, the recommended approach is to use the component-specific styling: ui5-toolbar { --sapButton_TextColor: blue; }

Your example

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!

[hirakshetry]

I want to change the button color used in the dynamic page header actions, as shown below. How can I modify the button color in that area?

[Vonahz]

After reviewing the behavior, I don’t believe this is a bug but rather a limitation of the current design. The dynamic header action buttons aren’t built to support this functionality yet. I am forwarding to @UI5/ui5-team-ctr-pir. From my point of view, this fits better as a feature request, since it would require new functionality rather than a fix to existing logic.

Regards, Milen

[NakataCode]

Hello @hirakshetry,

Since the ui5-dynamic-page component has been implemented according to the current design specification, which does not define dedicated theming parameters for the toolbar action buttons, your request to have separate CSS variables for styling these buttons is considered a specification enhancement request.

The toolbar action buttons (the "Create", "Edit", "Paste" buttons in your example) have no dedicated theming parameters and rely on global button variables (--sapButton_Background, --sapButton_TextColor), which affect all buttons throughout the application.

Based on the design requirements, this request will need to go through the design team review process to add public theming parameters specifically for the DynamicPage header action buttons. Could you please create a Jira ticket for Central Design and include the reference here in this issue?

Thanks and Regards, Nikola

[hkshetry]

Hi @NakataCode

Issue: Dynamic Page Action Button Icon Visibility Problem with Custom Theme

When applying custom theme variables at the root level (e.g., --sapButton_Background: red and --sapButton_TextColor: white), most buttons display correctly with a red background and white text. However, the Dynamic Page action button icon becomes invisible (while background and white text color).

Root Cause: The Dynamic Page action button uses a different background variable:

background-color: var(--_ui5-v2-17-0-rc-5_dynamic_page_header-actions-background); This internal variable is mapped to:

--_ui5-v2-17-0-rc-5_dynamic_page_header-actions-background: var(--sapObjectHeader_Background); Problem: The action button text color incorrectly inherits from --sapButton_TextColor, but since its background comes from --sapObjectHeader_Background instead of --sapButton_Background, there's a mismatch. This creates contrast issues where the icon/text may become invisible depending on the custom theme values.

Expected Behavior: The Dynamic Page action button should either:

Use consistent button-specific variables for both background and text color, or Use consistent object header variables for both properties This inconsistency causes problems when implementing customer themes.

[NakataCode]

Hi @hkshetry,

Thank you for the detailed analysis of the root cause.

After reviewing the DynamicPage specification and the Button specification it references, I've identified the following:

The DynamicPage spec defines: Button type: Secondary Background: --sapObjectHeader_Background (explicitly overridden from the standard Secondary button background) Border: 1px solid --sapButton_BorderColor

The Button spec defines for Secondary buttons: Background: --sapButton_Background Text & Icon: --sapButton_TextColor

The issue: The DynamicPage specification overrides the background from the standard Secondary button to use --sapObjectHeader_Background, but it does not specify what should happen to the text/icon color in this case. This creates ambiguity - should the text/icon color still follow the Secondary button specification (--sapButton_TextColor), or should it be adjusted to match the ObjectHeader theming context?

This is why the Central Design team needs to clarify the specification. They need to define which color parameter should be used for the icon/text when the background is set to --sapObjectHeader_Background.

Could you please create a Jira ticket for Central Design and reference this GitHub issue?

Thanks and regards, Nikola