feat: add Auto/Light/Dark color mode switcher to settings - #510
Merged
Conversation
Adds a color-mode control to Settings → Appearance that themes the DevTools shell and its inner integration iframes together, persisted to localStorage under the shared `vite-devtools-color-scheme` key (the same key the Nuxt plugin apps already read), so one switch re-themes everything via storage events. The shell moves from OS-only `dark: 'media'` to class-based dark, with a `ColorSchemeRoot` wrapper carrying `.dark`/`.light` so utilities resolve inside the shadow DOM and the light-DOM standalone page alike.
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds a color mode control (Auto / Light / Dark) to Settings → Appearance that themes both the Vite DevTools shell and its inner integration panels (iframes), persisted to
localStorage.How it works
vite-devtools-color-schemelocalStorage key — the same key the Nuxt integration apps (Rolldown/Vite/Oxc) already read via@vitejs/devtools-ui/composables/dark. Because those iframes are served same-origin, the write fires astorageevent that each iframe picks up, so one switch re-themes the shell and every inner integration at once.dark: 'media'), which can't be overridden. It now uses class-based dark (dark: 'class'), and each shell root is wrapped in a newColorSchemeRoot(display: contents) that carries.dark/.light+color-scheme. This makes.dark …utilities resolve inside the shadow root and the light-DOM standalone page identically, and preserves the shared theme's specificity-boost contract (e.g..dark .bg-base).prefers-color-scheme; Light/Dark are explicit overrides.Changes
state/color-mode.ts(new) —colorSchemePreference(persisted),isDark,setColorSchemePreference.dock/ColorSchemeRoot.vue(new) — the.dark/.light+color-schemewrapper.SettingsAppearance.vue— the Auto/Light/Dark segmented control.DockEmbedded.vue/DockStandalone.vue— wrapped inColorSchemeRoot.standalone/App.vue— mirrors the mode onto<html>(visible page canvas).uno.config.ts—dark: 'media'→dark: 'class'.popup.ts— popupcolor-schemenow watches sharedisDark.icons/ViteDevTools.vue— logo color follows the preference.Linked Issues
Additional context
lint,test,typecheck, andbuildall pass. Reviewers may want to focus on the shadow-DOM class-based dark approach (theColorSchemeRootwrapper) and the localStorage-key sharing that drives the iframes. Live browser click-through wasn't run (no Chromium available in the dev container).This PR was created with the help of an agent.