theme-sync issue across cross-origin and cross-packages

[LoTwT]

Hi, @webfansplz, @alexzhang1030.

This discussion is to talk about the theme-sync issues across cross-origin and cross-packages, such as Todo in client/App.vue.

---

vite plugin

• packages/overlay will be injected by transformIndexHtml in Vite.
• packages/client will be injected into an iframe and need to be triggered by a click on the overlay.

In this way, overlay and client display with the user app on the same browser tab.

standalone

• a single window isolated from the browser which is more likely a native app

browser extension

• a single tab embedded in the Chrome dev tools, that is more relative to Chrome itself than the browser tab which represents the user app

---

Back to the state-sync issue - the todo above, it means whichever way developers use devtools, the theme of the devtool's client ( and overlay when in the vite plugin) and the theme of the user app should be the same.

However, currently, I think that when in the standalone way and the browser extension way, they should stay the same with the system theme because they are more like a native app or embedded in a system app. In the Vite plugin way, we can design more detailed rules to control the theme between the user app and the devtool client for better DX.

Above is a product design problem. Below is about tech.

packages/client is in use in every way, and packages/overlay is only in use in the Vite plugin way.

• packages/overlay is created earlier than the user app, so some env checks depending on the window and document may fail.
• When used in the Vite plugin way in other Vite-based frameworks, such as Vitepress which uses a customized theme storage key, should the default theme storage key stay the same with the Vitepress's?
• now the theme of the standalone and browser extension doesn't stay the same with the system by default.