[bug] appearance/theme can't consist with vitepress

[LoTwT]

descriptions

appearance/theme can't consist with vitepress

devtools-next-vitepress-theme.mp4

repro

URL: https://stackblitz.com/edit/vite-yfew9s?file=docs%2F.vitepress%2Fconfig.ts

additional context

It works with vitesse after updating deps.

[brc-dd]

https://github.com/vuejs/devtools-next/blob/a6689f3dc2b478ed74ea1f611697fa650a8a7e46/packages/ui/src/components/DarkToggle.vue#L17-L22

This needs to be made configurable. VitePress uses storageKey: 'vitepress-theme-appearance' -- vueuse has 'vueuse-color-scheme' as default. Toggling theme via devtools UI still works fine though.

[LoTwT]

Hi, @brc-dd.
Is there a good way to detect if a site is powered by Vitepress, both in development and production?

[brc-dd]

Maybe something like

/vitepress/i.test(document.querySelector('meta[name=generator]')?.content)

Ah, wait. It's not there in dev. I can add it probably there too. This will be the most straightforward way I guess. Or I can just define __VITEPRESS__ to be true there (similar to how vue does that). You can then do !!window.__VITEPRESS__. WDYT?

You can also do this:

!!document.getElementById('check-dark-mode')?.innerText.includes('vitepress-theme-appearance')

[LoTwT]

Thank you. ♥️
I think adding __VITEPRESS__ is a good way. In the future, someone may benefit from it too.

[brc-dd]

released __VITEPRESS__ in vitepress@1.0.0-rc.45

[alexzhang1030]

As we discussed in #233, style isolation is intuitive for users. Therefore, we're closing this comment as 'not planned.' I prefer to develop a plugin for this function. Let's revisit this by reopening or creating a new feature request once the devtools have a mature plugin system. Thank you anyway 🫶.