From 0b34e70f6cf7d91939f15422212d7ed8ec343d38 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 7 Apr 2024 14:03:15 -0700
Subject: [PATCH] Fix: select dropdown background colors not visible in light
 mode (#6323)

---
 src-ui/src/styles.scss | 5 +++--
 src-ui/src/theme.scss  | 8 +++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 5dcf2bf9e..967b416ad 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -262,13 +262,14 @@ a.btn-link:focus-visible,
     }
 
     .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-      background-color: var(--pngx-bg-alt) !important;
+      background-color: var(--pngx-bg-darker) !important;
       color: var(--pngx-body-color-accent) !important;
     }
 
     .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
     .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
-      background: none;
+      font-weight: bold;
+      background-color: var(--pngx-bg-alt2) !important;
     }
   }
 
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 3596f002a..806966ec7 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -24,6 +24,7 @@ $color-mode-type: data;
   --pngx-success-darken-10: hsl(152, 69%, 11%); // based on success #198754
   --pngx-bg-alt: #fff;
   --pngx-bg-darker: var(--bs-gray-100);
+  --pngx-bg-alt2: var(--bs-gray-200);
   --pngx-focus-alpha: 0.3;
 }
 
@@ -78,6 +79,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   --bs-light: #1c1c1f;
   --bs-light-rgb: 28, 28, 31;
   --bs-border-color: #47494f;
+  --pngx-bg-alt2: #232323;
   --pngx-bg-darker: #101216;
   --bs-tertiary-bg: var(--pngx-bg-darker);
   --pngx-bg-alt: #242529;
@@ -195,9 +197,9 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     mix-blend-mode: luminosity;
   }
 
-  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
-  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-    background-color: var(--bs-light);
+  .paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover,
+  .paperless-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: var(--bs-light) !important;
   }
 
   .ng-select-multiple .ng-select-container .ng-value-container .ng-value {