Theme Switch for Web Component used in another application

We are creating a lit web component, which will be displayed as a popup in another application.
We want to switch the themes for our web component based on underlying application theme.
Note: The underlying application might not have support for IX.
How can we configure this in our web component in such a way that selected themes will get applied?

You need to load the theme style sheet as usual (Web Components | Siemens Industrial Experience) and set the theme class on a html element which wraps the ix control.

The theme provides then all necessary variables on the :root-selector.

1 Like

We are also creating a web component and not an application.
We don’t want to set the host application’s theme (may not be IX application) based on the web component.
From the source code of theme switcher, we could see that you are setting the theme on entire document body.

It doesnt matter. See the theme file in my first post the :root selector getting all the variables depending on the wrapping class