[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

• 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]

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?