fix: prevent overriding global theme from widget

[effie-ms]

Which Jira task is linked to this PR?

https://lifi.atlassian.net/browse/LF-16412

Why was it implemented this way?

_UPD:
Using the example provided in #583, just removing setMode() will not be sufficient.
The problem is that MUI's mode switcher (setMode()) always overwrites global html attributes, no matter what properties are set when defining the theme: when we define colorSchemeSelector: 'class' (or any other attribute) in createTheme (from MUI), it is always attached to the html node.

MUI's ThemeProvider has a property colorSchemeNode which allows to attach the color scheme attribute to a certain node (not only to global html), which theoretically could scope the mode only within widget's container, but instead it just duplicates the attributes, setting them to both global html node and that specified node.

So setting the node in this form still does not resolve the problem.

<div id="lifi-widget-custom-root">
      <MuiThemeProvider
        ...
        colorSchemeNode={document.getElementById('lifi-widget-custom-root') as Element}
      >
        {children}
      </MuiThemeProvider>
</div>

Screen.Recording.2025-11-07.at.15.26.48.mov

Instead, conditionally attaching widget to shadow root: https://mui.com/material-ui/customization/shadow-dom/

Checklist before requesting a review

• I have performed a self-review and testing of my code.
• This pull request is focused and addresses a single problem.

[github-actions]

Hey! This is your new endpoint: https://173f0e87.widget-lf16412.pages.dev

[github-actions]

Hey! This is your new endpoint: https://04d5fd7f.widget-lf16412.pages.dev

[github-actions]

Hey! This is your new endpoint: https://84575238.widget-lf16412.pages.dev

[effie-ms]

We have observed performance issues with wrapping the widget into shadow root, so closing it for now.

Decided to proceed with already existing workaround: setting the theme via config: hiding the theme switcher in the widget UI (HiddenUI.Appearance) and passing the theme mode into config (appearance: 'light' | 'dark' | 'system'). Then the theme can be switched externally, and the widget will just adapt to the change.

Docs:
https://docs.li.fi/widget/customize-widget#appearance
https://docs.li.fi/widget/customize-widget#hidden-ui-elements