diff --git a/packages/graphiql-react/src/editor/style/codemirror.css b/packages/graphiql-react/src/editor/style/codemirror.css
index 8129212e358..3b2b26b2fef 100644
--- a/packages/graphiql-react/src/editor/style/codemirror.css
+++ b/packages/graphiql-react/src/editor/style/codemirror.css
@@ -16,7 +16,7 @@
 .CodeMirror,
 .CodeMirror-gutters {
   background: none;
-  background-color: var(--color-neutral-0);
+  background-color: var(--editor-background, var(--color-neutral-0));
 }
 
 /* No padding around line number */
diff --git a/packages/graphiql/src/css/app.css b/packages/graphiql/src/css/app.css
index 290ff3fdaa6..543b2072e9d 100644
--- a/packages/graphiql/src/css/app.css
+++ b/packages/graphiql/src/css/app.css
@@ -121,6 +121,7 @@
 }
 
 .graphiql-container .result-window {
+  --editor-background: var(--color-neutral-7);
   flex: 1;
   height: 100%;
   position: relative;