-
Notifications
You must be signed in to change notification settings - Fork 461
Description
The MultiSelect component has poor text contrast in dark mode, making selected values and dropdown options difficult or impossible to read. Text renders in dark colors against dark backgrounds.
Steps to Reproduce:
-
Enable dark mode
-
Navigate to segments page
-
On Rules tab, add and And condition
-
Select Environment Name, IN operator and then select and Environment.
Observe text contrast for:- Selected value chips
- Dropdown options (especially on focus/hover)
- Inline selected values
Expected Behavior
Text should have sufficient contrast against backgrounds in both light and dark modes, meeting accessibility standards.
Actual Behavior
Text is barely visible or completely unreadable due to dark text on dark backgrounds.
Root Cause
Three MultiSelect sub-components are missing dark mode support:
CustomOption.tsx - Dropdown options have hardcoded light background (#f0f0f0) on focus
InlineMultiValue.tsx - Inline selected values have no color styling for dark mode