Summary
Dark-mode <select> options render as light-gray text on a white popup — only the highlighted row is legible. Affects the Resume approvals dropdown in setup-mcp.tsx and mcp-install-card.tsx (shared NativeSelect).
Screenshot
Repro
- Use the app in dark mode (
prefers-color-scheme: dark)
- Connect MCP → Advanced → open Resume approvals
Expected: all options readable · Actual: unselected options washed out.
Cause
The native popup's light/dark theme follows the <select>'s opaque background-color, not color-scheme or <option> styles. native-select.tsx uses bg-transparent → white popup + near-white option text. Its dark:bg-input/30 never applies (the dark: variant is class-gated, but dark mode is prefers-color-scheme-driven).
Fix
In packages/react/src/components/native-select.tsx, give the <select> a solid themed surface:
bg-transparent → bg-popover text-popover-foreground- drop
dark:bg-input/30 dark:hover:bg-input/50, add hover:bg-accent
- pin
colorScheme via useIsDark()
Happy to open a PR once assigned.
Summary
Dark-mode
<select>options render as light-gray text on a white popup — only the highlighted row is legible. Affects the Resume approvals dropdown insetup-mcp.tsxandmcp-install-card.tsx(sharedNativeSelect).Screenshot
Repro
prefers-color-scheme: dark)Expected: all options readable · Actual: unselected options washed out.
Cause
The native popup's light/dark theme follows the
<select>'s opaquebackground-color, notcolor-schemeor<option>styles.native-select.tsxusesbg-transparent→ white popup + near-white option text. Itsdark:bg-input/30never applies (thedark:variant is class-gated, but dark mode isprefers-color-scheme-driven).Fix
In
packages/react/src/components/native-select.tsx, give the<select>a solid themed surface:bg-transparent→bg-popover text-popover-foregrounddark:bg-input/30 dark:hover:bg-input/50, addhover:bg-accentcolorSchemeviauseIsDark()Happy to open a PR once assigned.