fix: improve highlighting color of search matches in dark mode

josdejong · Nov 10, 2022 · b85c260 · b85c260
1 parent 41856da
commit b85c260
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/lib/components/modes/textmode/TextMode.scss b/src/lib/components/modes/textmode/TextMode.scss
@@ -66,6 +66,10 @@
         outline: var(--jse-search-match-active-outline);
       }
 
+      :global(.cm-selectionMatch) {
+        background-color: var(--jse-search-match-background-color);
+      }
+
       :global(.cm-foldPlaceholder) {
         background: var(--jse-tag-background);
         color: var(--jse-tag-color);

diff --git a/src/lib/themes/jse-theme-dark.css b/src/lib/themes/jse-theme-dark.css
@@ -58,6 +58,7 @@
   --jse-selection-background-light-color: #333333;
   --jse-hover-background-color: #343434;
   --jse-active-line-background-color: rgba(255, 255, 255, 0.06);
+  --jse-search-match-background-color: rgba(45, 98, 34, 0.99);
 
   /* contents: section of collapsed items in an array */
   --jse-collapsed-items-background-color: #333333;

diff --git a/src/lib/themes/jse-theme-default.css b/src/lib/themes/jse-theme-default.css
@@ -75,9 +75,11 @@
   --jse-edit-outline: 2px solid #656565;
 
   /* contents: selected or hovered */
-  --jse-hover-background-color: rgba(0, 0, 0, 0.06);
   --jse-selection-background-color: #d3d3d3;
   --jse-selection-background-light-color: #e8e8e8;
+  --jse-hover-background-color: rgba(0, 0, 0, 0.06);
+  --jse-active-line-background-color: rgba(0, 0, 0, 0.06);
+  --jse-search-match-background-color: #99ff7780;
 
   /* contents: section of collapsed items in an array */
   --jse-collapsed-items-background-color: #f5f5f5;