ITADN

[bug]: command menu hardcodes neutral-* colors instead of theme tokens

#10819Openstickerdaniel 创建于 2026-05-30
S
stickerdanielcommented
### Describe the bug The docs command menu (Cmd+K) hardcodes `neutral-*` utilities for the dialog chrome and the footer bar instead of theme tokens, so it doesn't follow the active theme like the rest of the components. The inner `Command` is already `bg-transparent` over a token surface, but these two spots use raw palette colors. `apps/v4/components/command-menu.tsx:403` (DialogContent): ``` ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800 ``` `apps/v4/components/command-menu.tsx:442` (footer bar): ``` border-t border-t-neutral-100 bg-neutral-50 dark:border-t-neutral-700 dark:bg-neutral-800 ``` On the docs site it looks fine, because the default theme is `neutral`-based and the values line up with the tokens. It drifts once the component is reused under a theme that retints `--popover` / `--muted` / `--border`: the palette stays neutral-gray while every surface around it adapts. Swapping to tokens keeps the exact default look (every token used is part of the default theme): ```diff @@ apps/v4/components/command-menu.tsx:403 (DialogContent) - <DialogContent className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800"> + <DialogContent className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl bg-popover ring-4 ring-foreground/5 dark:ring-foreground/10"> @@ apps/v4/components/command-menu.tsx:442 (footer bar) - <div className="absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium text-muted-foreground dark:border-t-neutral-700 dark:bg-neutral-800"> + <div className="absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-border bg-muted/50 px-4 text-xs font-medium text-muted-foreground"> ``` `Command` is `bg-transparent`, so the `bg-popover` on `DialogContent` provides the surface and `dark:bg-neutral-900` drops out. The svelte port has the same thing verbatim (huntabyte/shadcn-svelte#2719), which is how I noticed it. Happy to PR it. ### Affected component/components CommandMenu (`apps/v4/components/command-menu.tsx`) ### How to reproduce 1. Reuse the command menu in an app on a non-neutral base theme (changes `--popover` / `--muted` / `--border`). 2. Open the Cmd+K palette. 3. Dialog ring/background and the bottom hint bar render neutral-gray instead of matching the themed surfaces around them. ### System Info ``` N/A - static styling in the docs source (apps/v4/components/command-menu.tsx), not runtime or browser dependent. ``` ### Before submitting - [x] I've made research efforts and searched the documentation - [x] I've searched for existing issues
0 条评论