Merge pull request #6155 from aschlaep/update-search-colors

Update search match colors in notebook and text document
jupyterlab · Apr 2, 2019 · 79a332d · 79a332d
2 parents c930c97 + fdd406d
commit 79a332d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 2 deletions.
diff --git a/packages/codemirror-extension/schema/commands.json b/packages/codemirror-extension/schema/commands.json
@@ -32,7 +32,7 @@
       "type": "boolean",
       "title": "Style Selected Text",
       "description": "Value is boolean",
-      "default": false
+      "default": true
     },
     "selectionPointer": {
       "type": ["boolean", "string"],

diff --git a/packages/codemirror/src/editor.ts b/packages/codemirror/src/editor.ts
@@ -1244,7 +1244,7 @@ export namespace CodeMirrorEditor {
     lineWiseCopyCut: true,
     scrollPastEnd: false,
     styleActiveLine: false,
-    styleSelectedText: false,
+    styleSelectedText: true,
     selectionPointer: false,
     rulers: [],
     foldGutter: false

diff --git a/packages/codemirror/style/index.css b/packages/codemirror/style/index.css
@@ -107,6 +107,18 @@ pre.CodeMirror-line {
   margin-right: -5px;
 }
 
+.CodeMirror-selectedtext.cm-searching {
+  background-color: var(--jp-search-selected-match-background-color) !important;
+  color: var(--jp-search-selected-match-color) !important;
+}
+
+.cm-searching {
+  background-color: var(
+    --jp-search-unselected-match-background-color
+  ) !important;
+  color: var(--jp-search-unselected-match-color) !important;
+}
+
 .CodeMirror-focused .CodeMirror-selected {
   background-color: var(--jp-editor-selected-focused-background);
 }

diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css
@@ -375,6 +375,12 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-search-toggle-off-opacity: 0.5;
   --jp-search-toggle-hover-opacity: 0.75;
   --jp-search-toggle-on-opacity: 1;
+  --jp-search-selected-match-background-color: rgb(255, 225, 0);
+  --jp-search-selected-match-color: black;
+  --jp-search-unselected-match-background-color: var(
+    --jp-inverse-layout-color0
+  );
+  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
 
   /* scrollbar related styles. Supports every browser except Edge. */
 

diff --git a/packages/theme-light-extension/style/variables.css b/packages/theme-light-extension/style/variables.css
@@ -372,4 +372,10 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-search-toggle-off-opacity: 0.4;
   --jp-search-toggle-hover-opacity: 0.65;
   --jp-search-toggle-on-opacity: 1;
+  --jp-search-selected-match-background-color: rgb(245, 200, 0);
+  --jp-search-selected-match-color: black;
+  --jp-search-unselected-match-background-color: var(
+    --jp-inverse-layout-color0
+  );
+  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
 }