Select-kit dropdown: selected/highlighted items have poor color contrast, text and icons disappear

Bug
1

When using the topic notification dropdown (Watching/Tracking/Normal/Muted), the currently selected item’s text and icon become invisible due to insufficient contrast between the selection background color and foreground colors.

Steps to reproduce

  1. Open any topic

  2. Click the notification bell button at the bottom of the topic

  3. Observe the currently selected notification level (e.g., “Tracking”)

Expected behavior

The selected item should have clearly visible text and icon with good contrast.

Actual behavior

  • Text label disappears or becomes very hard to read

  • Bell icon becomes invisible

  • Issue is most noticeable in dark themes but can affect any theme depending on color palette

Technical details

In app/assets/stylesheets/common/select-kit/select-kit.scss, the .is-selected state only sets the background color without ensuring foreground contrast:

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // No color override for text or icons
}

The --d-selected CSS variable comes from the theme’s $selected color, but the text (.name, .desc) and icons (.d-icon) retain their default colors which may not contrast well with the selection background.

Screenshots

image
image531×470 11.9 KB

Note: I would have added the other image where the icon disappears for the seelcted state, but i’m new and can only add one image right now.

Environment

  • Discourse version: latest

  • Browser: Edge

  • Theme: Foundation theme