[bug] appearance/theme can't consist with vitepress about devtools-next

[brc-dd]

released __VITEPRESS__ in [email protected]

[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')

[brc-dd]

devtools-next/packages/ui/src/components/DarkToggle.vue

Lines 17 to 22 in a6689f3

	const mode = useColorMode({
	initialValue: isDarkModel.value ? 'dark' : 'light',
	onChanged: (value) => {
	isDarkModel.value = value === 'dark'
	},
	})

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?

[LoTwT]

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

[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 🫶.