fix: don't override editor background colours in darkmode COMPASS-9248 COMPASS-9247 (#6993)

* don't override the stage editor container background colour in darkmode

* remove the extra background on the focus editor

* set the code editor in the json view dark mode to be the same colour as the background

Author: lerouxb

packages/compass-aggregations/src/components/focus-mode/focus-mode.tsx

@@ -60,9 +60,7 @@ const editorAreaBaseStyles = css({
   paddingTop: spacing[600],
 });
 
-const editorAreaDarkStyles = css({
-  backgroundColor: palette.gray.dark4,
-});
+const editorAreaDarkStyles = css({});
 
 const editorAreaLightStyles = css({
   backgroundColor: palette.gray.light3,

packages/compass-aggregations/src/components/stage-editor/stage-editor.tsx

@@ -36,9 +36,7 @@ const editorContainerStyles = css({
   height: '100%',
 });
 
-const editorContainerStylesDark = css({
-  background: palette.gray.dark4,
-});
+const editorContainerStylesDark = css({});
 
 const editorContainerStylesLight = css({
   background: palette.gray.light3,

packages/compass-crud/src/components/json-editor.tsx

@@ -37,10 +37,10 @@ const editorStyles = css({
 
 const editorDarkModeStyles = css({
   '& .cm-editor': {
-    backgroundColor: `${palette.gray.dark4} !important`,
+    backgroundColor: `${palette.black} !important`,
   },
   '& .cm-gutters': {
-    backgroundColor: `${palette.gray.dark4} !important`,
+    backgroundColor: `${palette.black} !important`,
   },
 });