fix(changelog): make react-select dropdown legible in dark mode

[gkLeo]

Description / Motivation

Added dark-mode CSS overrides for react-select in src/styles/global.css to fix dropdown contrast on /changelog. The rules map react-select parts (control, menu, options, multi-value, indicators) to existing theme tokens so they respect the dark theme.

The /changelog page's Products and Changes dropdowns use react-select with its default light theme, making them illegible in dark mode. The CSS fix ensures the dropdown respects the site's dark theme and remains readable.

Related issue: #1089

How Has This Been Tested?

To verify the dark-mode fix, I tested the CSS changes directly on the live site using browser DevTools:

1. Opened the live changelog page (https://developers.sitecore.com/changelog) and switched to Dark theme.

2. Opened DevTools → Console and injected the dark-mode CSS overrides:

   const css = `
   .dark .react-select__control { background-color: var(--background); border-color: var(--border); color: var(--foreground); }
   .dark .react-select__control:hover { border-color: var(--border-a11y); }
   .dark .react-select__control--is-focused { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
   .dark .react-select__single-value,
   .dark .react-select__input-container,
   .dark .react-select__input { color: var(--foreground) !important; }
   .dark .react-select__placeholder { color: var(--placeholder); }
   .dark .react-select__menu { background-color: var(--popover); border: 1px solid var(--border); color: var(--popover-foreground); }
   .dark .react-select__menu-list { background-color: var(--popover); }
   .dark .react-select__option { background-color: transparent; color: var(--popover-foreground); }
   .dark .react-select__option--is-focused { background-color: var(--accent); color: var(--accent-foreground); }
   .dark .react-select__option--is-selected { background-color: var(--primary-background-active); color: var(--foreground); }
   .dark .react-select__multi-value { background-color: var(--neutral-background); color: var(--foreground); }
   .dark .react-select__multi-value__label { color: var(--foreground); }
   .dark .react-select__multi-value__remove:hover { background-color: var(--destructive-background); color: var(--destructive-foreground); }
   .dark .react-select__indicator-separator { background-color: var(--border); }
   .dark .react-select__indicator { color: var(--muted-foreground); }
   .dark .react-select__indicator:hover { color: var(--foreground); }
   `;
   const s = document.createElement('style');
   s.id = 'dark-mode-select-test';
   s.textContent = css;
   document.head.appendChild(s);

3. Clicked the Products and Changes dropdowns and verified:

   • Closed control has a dark background with readable text/placeholder.
   • Opened menu has a dark background with readable option text.
   • Hover and selected option states are visually distinct.
   • Multi-value chips (selected items) are clearly readable.
   • Dropdown/clear indicator icons are visible.

4. Switched back to Light theme and verified the dropdown still looks correct (no regression).

5. Removed the test styles to confirm the original issue reappears:

   document.getElementById('dark-mode-select-test')?.remove();
   

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update (non-breaking change; modified files are limited to the /data directory or other markdown files)

Checklist:

• I have read the Contributing guide.
• My code/comments/docs fully adhere to the Code of Conduct.
• My change is a code change.
• My change is a documentation change and there are NO other updates required.
• My change has new or updated images which are stored in the /public/images folder that need to be migrated to Sitecore DAM

[vercel]

@gkLeo is attempting to deploy a commit to the Sitecore Technical Marketing Team on Vercel.

A member of the Team first needs to authorize it.