Skip to content

fix(core): command palette dark-on-dark text + glass-panel mismatch#478

Merged
antfu merged 1 commit into
vitejs:mainfrom
dvcolomban:fix/devtools-command-palette-dark-mode
Jul 27, 2026
Merged

fix(core): command palette dark-on-dark text + glass-panel mismatch#478
antfu merged 1 commit into
vitejs:mainfrom
dvcolomban:fix/devtools-command-palette-dark-mode

Conversation

@dvcolomban

@dvcolomban dvcolomban commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Summary

The command palette overlay (Cmd+K) had two small visual bugs, both traced to a shortcut-name typo:

  • Dark-on-dark text: the search input and the pin-toggle icons in the Docks settings view used class text-base — that's UnoCSS/Tailwind's built-in font-size utility (font-size: 1rem), not a color shortcut. It sets no color at all. The dark-aware text-color shortcut in this repo is color-base (packages/ui/src/unocss/shared-shortcuts.ts). Since the dialog background correctly switches to near-black in dark mode but the input text fell back to the browser default, the result was unreadable text in dark mode.
  • Glass-panel mismatch: the palette dialog used an opaque bg-base background, while the actual docked panels (DockPanel.vue, DockEdge.vue) both use the translucent/blurred bg-glass:75 shortcut. The palette was the one surface that didn't match the rest of the floating dock chrome.

Changes

  • CommandPalette.vue: text-basecolor-base on the search input; bg-basebg-glass:75 color-base on the dialog surface (matches DockPanel.vue/DockEdge.vue exactly).
  • SettingsDocks.vue: same text-basecolor-base typo fix on the two pin-toggle icons (identical bug, bundled since it's a one-line, zero-risk fix).
Before After
Screenshot 2026-07-24 at 23 04 25 image

|

Test plan

  • Verified in the playgrounds/core dev server, dark mode: command palette input text is now readable, dialog background matches the docked panel's glass/blur look (confirmed via computed styles: background-color: rgba(17,17,17,0.75), backdrop-filter: blur(7px), identical to DockPanel/DockEdge).
  • Verified light mode: no regression.
  • pnpm run typecheck (vue-tsc -b) clean.
  • eslint clean on both touched files.

… contrast

The command palette's search input and dialog surface used `text-base`
(UnoCSS's font-size utility) where `color-base` (the dark-aware text-color
shortcut) was clearly intended — `text-base` sets no color at all, so input
text fell back to the browser default (dark) on top of the dialog's own
dark-mode background, rendering it unreadable. Same typo also affected the
pin-toggle icons in the Docks settings view.

Also switch the palette dialog's opaque `bg-base` to `bg-glass:75`, matching
the translucent/blurred surface already used by the docked panels
(DockPanel.vue, DockEdge.vue) so the palette's look is consistent with the
rest of the floating dock chrome.
@pkg-pr-new

pkg-pr-new Bot commented Jul 24, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@478

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@478

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@478

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@478

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@478

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@478

commit: 57b8910

@antfu
antfu merged commit 8beccdf into vitejs:main Jul 27, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants