From 2288efe2ea8479fe0f6cd091f29988c03903c260 Mon Sep 17 00:00:00 2001
From: gkLeo <Geek_Leo@outlook.com>
Date: Sun, 7 Jun 2026 16:24:22 +0400
Subject: [PATCH] fix(changelog): make react-select dropdown legible in dark
 mode

---
 src/styles/global.css | 62 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/src/styles/global.css b/src/styles/global.css
index 053dae745..369fbc35c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -695,3 +695,65 @@
 .dark .prose {
   @apply prose-invert;
 }
+
+/* react-select dark-mode overrides (used by MultiSelect, e.g. on /changelog) */
+.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);
+}