From c6a6fdc20c8833859ac3de87151798c2dfb50081 Mon Sep 17 00:00:00 2001 From: "Anthony Fu (via agent)" Date: Tue, 4 Aug 2026 00:17:58 +0000 Subject: [PATCH 1/2] feat: add Auto/Light/Dark color mode switcher to settings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- packages/core/src/client/standalone/App.vue | 12 +++ .../client/webcomponents/.generated/css.ts | 2 +- .../components/dock/ColorSchemeRoot.vue | 21 +++++ .../components/dock/DockEmbedded.vue | 45 +++++----- .../components/dock/DockStandalone.vue | 85 +++++++++--------- .../components/icons/ViteDevTools.vue | 3 +- .../views-builtin/SettingsAppearance.vue | 29 ++++++ .../client/webcomponents/state/color-mode.ts | 31 +++++++ .../src/client/webcomponents/state/popup.ts | 89 +++---------------- .../src/client/webcomponents/uno.config.ts | 6 +- 10 files changed, 180 insertions(+), 143 deletions(-) create mode 100644 packages/core/src/client/webcomponents/components/dock/ColorSchemeRoot.vue create mode 100644 packages/core/src/client/webcomponents/state/color-mode.ts diff --git a/packages/core/src/client/standalone/App.vue b/packages/core/src/client/standalone/App.vue index 1158c49e4..043d85e54 100644 --- a/packages/core/src/client/standalone/App.vue +++ b/packages/core/src/client/standalone/App.vue @@ -1,9 +1,21 @@ + + diff --git a/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue b/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue index 0c8c0c49b..142773512 100644 --- a/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue +++ b/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue @@ -10,6 +10,7 @@ import CommandPalette from '../command-palette/CommandPalette.vue' import Confirm from '../display/Confirm.vue' import ToastOverlay from '../display/ToastOverlay.vue' import FloatingElements from '../floating/FloatingElements.vue' +import ColorSchemeRoot from './ColorSchemeRoot.vue' import Dock from './Dock.vue' import DockEdge from './DockEdge.vue' import DockPanel from './DockPanel.vue' @@ -52,26 +53,28 @@ onUnmounted(() => {