diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
index cc1d2bc53a9df..7f0b25e7e25af 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
@@ -57,6 +57,8 @@ MSG message-id=<%{GREEDYDATA}>`;
         <EuiPanel paddingSize="s">
           <EuiCodeEditor
             width="100%"
+            theme="textmate"
+            mode="text"
             value={value}
             onChange={onChange}
             setOptions={{
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
index 19335a88e9b87..3b283d7698ec4 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
@@ -28,6 +28,8 @@ export function EventInput({ value, onChange }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           width="100%"
+          theme="textmate"
+          mode="text"
           value={value}
           onChange={onChange}
           setOptions={{
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js b/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
index f669ac7a61fdd..72d2958c16b83 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
@@ -27,6 +27,7 @@ export function EventOutput({ value }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           mode="json"
+          theme="textmate"
           isReadOnly
           width="100%"
           height="340px"
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts
new file mode 100644
index 0000000000000..cea15c5e3c8d0
--- /dev/null
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import 'brace/mode/json';
+import 'brace/mode/text';
+import 'brace/theme/textmate';
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
index 2a9fa499f37ea..7a6bf76241d25 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
@@ -5,6 +5,9 @@
  */
 import React from 'react';
 import { isEmpty } from 'lodash';
+
+import './brace_imports';
+
 import {
   EuiForm,
   EuiButton,
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
index 09a6e100d9f88..5e523e9b92d87 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
@@ -29,6 +29,7 @@ export function PatternInput({ value, onChange }) {
       <EuiPanel paddingSize="s">
         <EuiCodeEditor
           width="100%"
+          theme="textmate"
           value={value}
           onChange={onChange}
           mode={new GrokMode()}