Fix dark mode option styling inside select optgroups - #2721
Merged
calebporzio merged 1 commit intoAug 9, 2026
Conversation
The default select variant forces dark mode option colours with a child combinator, so options nested in an <optgroup> match neither rule and fall back to the browser's light mode rendering. Match them as descendants instead, which is strictly wider and leaves ungrouped selects unchanged.
Contributor
|
Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The scenario
A native
<flux:select>with its options organised into<optgroup>s, viewed in dark mode on Windows.The problem
The default variant forces dark mode option colours with a child combinator:
&>optiononly matches options that are direct children of the<select>. Wrapping them in an<optgroup>drops them a level, so they match neither rule and fall back to the browser's default light mode option rendering — the same problem #1100 fixed, one level down.The result is an inconsistent dropdown rather than a uniformly wrong one: a
placeholderis emitted as a direct child of the<select>, so it keeps its dark styling while every grouped option below it does not.The solution
Match the options as descendants instead:
Same specificity, strictly wider match, so ungrouped selects are unaffected.
No
distrebuild is needed — these utilities are generated in the consuming app via the@sourceonflux/stubs, anddist/flux.csscontains nooptionutilities of its own.Notes
The
<optgroup>label itself is still unstyled in dark mode and wants its own rule, something likedark:[&_optgroup]:bg-zinc-700plus a muted label colour. I've left that out because the right colour is a design decision rather than a bug fix, and I didn't want to bundle a judgement call with a one-line correction. Happy to add it if you tell me what you'd want.This also affects #2693, whose
defaultgroup variant renders a plain<optgroup>. The screenshots on that PR look like the custom/pro variant, which is probably why it hasn't surfaced there.Fixes #2720