feature: add hideDarkMode option to control the toggle#123
feature: add hideDarkMode option to control the toggle#123LukerSpringtree wants to merge 0 commit intoantfu-collective:mainfrom LukerSpringtree:main
Conversation
| Inspect({ | ||
| build: true, | ||
| open: true, | ||
| hideDarkMode: false, |
There was a problem hiding this comment.
Thank you very much for your reply. Do you mean 'embedding a <script> tag directly in the HTML file,' or should I change the name 'hideDarkMode' to 'embedded'?
Sorry for the confusion.
There was a problem hiding this comment.
Yeah I was suggesting the naming. hideDarkMode is a bit too specific, while for embedded in the future we could also add other features etc. Also we should go for ? embedded in the query
There was a problem hiding this comment.
Using embedded and configuring its value as a query parameter is extremely difficult for me. The reason is that in the Inspect project, the static resources use hash routing, which makes it impossible to correctly switch the position of query parameters. Additionally, when opening the modal, a nested routing approach within a single page is used, which prevents switching to WebHistory routing.
In summary, using query parameters is too difficult for me.
😭
There was a problem hiding this comment.
Or it's fine to pass the meta with the getMetadata rpc from the server side, so we don't need to rely queries
2 participants
Description
Add a configuration option: hideDarkMode, which can control the visibility of the Dark Mode toggle button.
The background is that the Vue DevTools project has a bug (#737) and issue #339. The main idea is that DevTools wants its theme to be isolated from the project’s theme. However, since vite-plugin-inspect uses VueUse's useDark method, it causes issues with theme isolation and also triggers bug #737. The best solution is to hide this button in DevTools, and this PR implements that functionality.
Linked Issues
vuejs/devtools#737 (comment)
vuejs/devtools#736
vuejs/devtools#339
Additional context
The method I used to modify the route is not very elegant. I tried many approaches, but none of them worked perfectly due to various issues. The main reason is that the __inspect page itself is a static resource, and it's difficult to make the hideDarkMode configuration penetrate into Inspect through Vite’s configuration.
Therefore, I decided to differentiate at the stage when the static web resource server starts. It is hard to achieve this requirement through environment variables or other Vite-injected variables. If anyone has a better solution, I would appreciate your guidance. Thank you!