Add light mode style to code editor

Author: waltertan12

packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx

@@ -6,6 +6,7 @@ import {
   cx,
   useFocusRing,
   ParagraphSkeleton,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { Document } from 'mongodb';
 import React, { useMemo, useCallback } from 'react';
@@ -62,7 +63,6 @@ const codeEditorContainerStyles = css({
 const codeEditorStyles = css({
   borderRadius: editorContainerRadius,
   '& .cm-editor': {
-    background: `${palette.white} !important`,
     borderRadius: editorContainerRadius,
   },
   '& .cm-content': {
@@ -71,6 +71,12 @@ const codeEditorStyles = css({
   },
 });
 
+const lightModeCodeEditorStyles = css({
+  '& .cm-editor': {
+    background: `${palette.white} !important`,
+  },
+});
+
 const indexSuggestionsLoaderStyles = css({
   marginBottom: spacing[600],
   padding: spacing[600],
@@ -111,6 +117,7 @@ const QueryFlowSection = ({
   initialQuery: Document | null;
 }) => {
   const track = useTelemetry();
+  const darkMode = useDarkMode();
   const [inputQuery, setInputQuery] = React.useState(
     initialQuery ? JSON.stringify(initialQuery, null, 2) : ''
   );
@@ -205,7 +212,10 @@ const QueryFlowSection = ({
             onChangeText={(text) => handleQueryInputChange(text)}
             placeholder="Type a query: { field: 'value' }"
             completer={completer}
-            className={codeEditorStyles}
+            className={cx(
+              codeEditorStyles,
+              !darkMode && lightModeCodeEditorStyles
+            )}
           />
         </div>