Skip to content

fix(native-select): apply computed background color to options (#10237)#10240

Open
aakarsh12x wants to merge 2 commits intoshadcn-ui:mainfrom
aakarsh12x:fix/10237-native-select-bg
Open

fix(native-select): apply computed background color to options (#10237)#10240
aakarsh12x wants to merge 2 commits intoshadcn-ui:mainfrom
aakarsh12x:fix/10237-native-select-bg

Conversation

@aakarsh12x
Copy link
Copy Markdown

Fixes #10237

This PR resolves an issue where the background colors of native <option> and <optgroup> elements inside the NativeSelect component fallback (and mobile views) were not correctly applying the CSS variables and modern oklch() color utilities, specifically in dark mode on chromium-based browsers.
The Problem
Native option elements are rendered outside the CSS cascade by the OS/browser chrome. Because of this:

  • They fail to resolve CSS variables (var(--input), etc.).
  • Modern color functions like color-mix(in oklch...) applied via Tailwind on the parent <select> are ignored on the children elements, leaving them with the system default color (which causes bright white option backgrounds on dark-mode pages).

The Solution
Instead of relying purely on the CSS cascade for native options, we use a custom useResolvedOptionStyle hook with a React Context:

  1. The hook attaches a ref to the parent <select> and reads the getComputedStyle() of the element on mount (and safely refires on theme toggles via a MutationObserver).
  2. This allows the browser engine to properly resolve all variables/oklch values into a concrete rgb() format.
  3. The hook passes that exact computed background and text color to a NativeSelectContext.
  4. NativeSelectOption and NativeSelectOptGroup merge these securely as explicit inline style attributes—which are reliably respected across browsers regardless of the CSS cascade limitations.

Changes Made

  • NativeSelect (new-york-v4): Added useResolvedOptionStyle hook + Context Provider to forward computed color values to children as inline styles.
  • NativeSelect (base): Replicated fix.
  • NativeSelect (radix): Replicated fix.

Testing Performed

  • Verified the fix handles correctly rendering both dark-mode and light-mode dropdown background colors without causing regressions.
  • Successfully dynamically recomputes if/when the document dataset theme dynamically changes.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 31, 2026

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

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.

[bug]: Unable to apply background color (OKLCH / CSS variables) to <option> in Select / native select fallback

1 participant