fix(client): hide dark mode button of vite-plugin-inspect page

[LukerSpringtree]

to fix #736

2024-12-11.22.07.58.mov

After this commit, the page behaves as below;

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	615d830
🔍 Latest deploy log	https://app.netlify.com/sites/vue-devtools-docs/deploys/676513eef1fd910008e212c7

[LukerSpringtree]

---

There are many code about the useDevToolsColorMode but I don't how to fix them.

[pkg-pr-new]

Open in Stackblitz

@vue/devtools-applet

npm i https://pkg.pr.new/@vue/devtools-applet@737

@vue/devtools-core

npm i https://pkg.pr.new/@vue/devtools-core@737

@vue/devtools

npm i https://pkg.pr.new/@vue/devtools@737

@vue/devtools-api

npm i https://pkg.pr.new/@vue/devtools-api@737

@vue/devtools-kit

npm i https://pkg.pr.new/@vue/devtools-kit@737

vite-plugin-vue-devtools

npm i https://pkg.pr.new/vite-plugin-vue-devtools@737

commit: e26863a

[alexzhang1030]

Hi, that's related to #339

The inspect page is hosted as an injected iframe, so the dark/light logic is strictly isolated from devtools page. They "can" work properly because they share the same dark class name in the html tag.

I think this is a vueuse side bug, so I believe the proper solution is to hide the theme toggle button on the inspect page. /cc @webfansplz , WDYT?

[LukerSpringtree]

WDYT

OK~
See the history issues, I get the background.

For the first time, I want to update the vite-plugin-inspect vite plugin and add an option to hide the Dark Mode button.
But! It's too hard because the plugin client part is a static source. The option can't be passed to the client content.

This is a tricky question.

@alexzhang1030

[LukerSpringtree]

@alexzhang1030 @webfansplz

antfu-collective/vite-plugin-inspect#123

I submitted a PR to vite-plugin-inspect. After understanding the background, my current plan is to add a hideDarkMode configuration option to vite-plugin-inspect. This way, the theme toggle button for the inspect module can be disabled in DevTools.
I believe this is the best solution for now.

[alexzhang1030]

@alexzhang1030 @webfansplz

antfu-collective/vite-plugin-inspect#123

I submitted a PR to vite-plugin-inspect. After understanding the background, my current plan is to add a hideDarkMode configuration option to vite-plugin-inspect. This way, the theme toggle button for the inspect module can be disabled in DevTools. I believe this is the best solution for now.

Looks like you can enable embeded mode to vite-plugin-inspect now.

[LukerSpringtree]

@alexzhang1030 @webfansplz
antfu-collective/vite-plugin-inspect#123
I submitted a PR to vite-plugin-inspect. After understanding the background, my current plan is to add a hideDarkMode configuration option to vite-plugin-inspect. This way, the theme toggle button for the inspect module can be disabled in DevTools. I believe this is the best solution for now.

Looks like you can enable embeded mode to vite-plugin-inspect now.

Yes! I will give a pr later.

[LukerSpringtree]

@alexzhang1030 @webfansplz
antfu-collective/vite-plugin-inspect#123
I submitted a PR to vite-plugin-inspect. After understanding the background, my current plan is to add a hideDarkMode configuration option to vite-plugin-inspect. This way, the theme toggle button for the inspect module can be disabled in DevTools. I believe this is the best solution for now.

Looks like you can enable embeded mode to vite-plugin-inspect now.

It's too hard!
because of update dependies. there is an ohter blocking bug~

antfu-collective/vite-plugin-inspect#127

hhh

[LukerSpringtree]

@alexzhang1030 @webfansplz
antfu-collective/vite-plugin-inspect#123
I submitted a PR to vite-plugin-inspect. After understanding the background, my current plan is to add a hideDarkMode configuration option to vite-plugin-inspect. This way, the theme toggle button for the inspect module can be disabled in DevTools. I believe this is the best solution for now.

Looks like you can enable embeded mode to vite-plugin-inspect now.

Bro, may I ask if there’s an issue with our contribute file?
Every time I fork the devtool repository and run pn i, it takes a long time with no results.
I have to run pn i -w -f first, and then run pn i again to get the project up and running.
It’s so frustrating. Why is this happening? Thanks in advance!

[LukerSpringtree]

@alexzhang1030 @webfansplz
antfu-collective/vite-plugin-inspect#123
I submitted a PR to vite-plugin-inspect. After understanding the background, my current plan is to add a hideDarkMode configuration option to vite-plugin-inspect. This way, the theme toggle button for the inspect module can be disabled in DevTools. I believe this is the best solution for now.

Looks like you can enable embeded mode to vite-plugin-inspect now.

#753