[theming]: How to expose a ui5-webcomponents setTheme function from custom webcomponents

[akshil-verma]

Bug Description

Hi,

We have created a custom webcomponent based on ui5-webcomponent's framework. Our web component is utilized in a frontend project that is built using the Luigi micro frontend framework. Until version 1.18.0, everything worked fine, but from version 1.19.0 the frontend project has been facing theming-related issues, i.e., the theme changes only partially for the whole frontend project. We realized that this problem is due to the new CSS runtime fix in #7703 and this problem is solved when the frontend framework calls the setTheme function.

However, the frontend framework team insists on not importing any of the ui5-webcomponents packages as they are not directly dependent on it. So, my question is if there's any recommended way of exposing the setTheme function from within a custom webcomponent?

@ilhan007 This problem is from the discussion #8755. I am converting this into a bug for better tracking as this problem is gaining traction from our product's side.

Best regards,
Akshil Verma

Affected Component

@ui5/webcomponents-theming

Expected Behaviour

The project using Luigi micro-frontend should have a way to set theme from our custom webcomponent without importing/installing any of the @ui5/webcomponents packages.

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

MacOS

Additional Context

@ilhan007 I have already shared the links of the projects to you for this problem.

Organization

SAP

Declaration

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

[niyap]

Hello @SAP/ui5-webcomponents-core,

As there is already an ongoing discussion on the topic, I am forwarding the issue to you.
Could you please check?

Thank you in advance!

Kind Regards,
Niya

[nnaydenow]

HI @akshil-verma,

Regarding the issue you mentioned, we've made changes to how CSS variables are applied. This was done to ensure everything works smoothly together. Previously, sometimes older versions of CSS variables would take precedence, causing some variables to not function properly, which affected the appearance of the component. Currently, there isn't a direct way to make the setTheme method accessible from a custom component unless you create it yourself (by exposing it via some function that you have to create). However, this would mean that you need to have at least one component per runtime. One suggestion is to create a central registry (like a single storage place) where all the setTheme functions for each registered runtime are stored, and then iterate through them all whenever the theme changes.

[akshil-verma]

@nnaydenow Thanks for the reply. I have implemented your suggestions and resolved the issue from our end. I will be closing this issue and the discussion topic.