From 615b1ae9313b40d7db375b7fc72c399692b46383 Mon Sep 17 00:00:00 2001
From: Jesse Rosenberger <git@jro.cc>
Date: Sun, 4 Apr 2021 21:45:47 +0300
Subject: [PATCH] fix: Adjust colours of CodeMirror "Find" dialog on "light"
 background. (#1051)

addressing https://github.com/apollographql/apollo-server/issues/2117
---
 .../src/components/Playground/EditorWrapper.tsx          | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx b/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
index 52054c505..cc19cfb7c 100644
--- a/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
@@ -611,6 +611,15 @@ const EditorWrapper = styled.div`
     width: 20em;
   }
 
+  .CodeMirror-dialog span.CodeMirror-search-label {
+    color: ${p => p.theme.colours.text};
+  }
+
+  .CodeMirror-dialog input.CodeMirror-search-field {
+    color: ${p => p.theme.colours.text};
+    background: ${p => p.theme.colours.background};
+  }
+
   .CodeMirror-dialog button {
     font-size: 70%;
   }