From e170a3176e5ac265e6443b902ae735a36c0adf4e Mon Sep 17 00:00:00 2001
From: Cristiano Ventura <mrk.cristiano@gmail.com>
Date: Thu, 19 Sep 2024 17:12:06 -0400
Subject: [PATCH] feat: change background color for editor in light theme

---
 src/components/Monaco/ReactMonacoEditor.tsx          |  2 +-
 src/components/Monaco/themes/k6StudioLight.tsx       | 12 ++++++++++++
 .../WebLogView/ResponseDetails/Preview.tsx           |  3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Monaco/themes/k6StudioLight.tsx

diff --git a/src/components/Monaco/ReactMonacoEditor.tsx b/src/components/Monaco/ReactMonacoEditor.tsx
index fb4307a9..bf79e579 100644
--- a/src/components/Monaco/ReactMonacoEditor.tsx
+++ b/src/components/Monaco/ReactMonacoEditor.tsx
@@ -31,7 +31,7 @@ export function ReactMonacoEditor(props: EditorProps) {
     <Editor
       {...props}
       options={{ ...defaultOptions, ...props.options }}
-      theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+      theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
     />
   )
 }
diff --git a/src/components/Monaco/themes/k6StudioLight.tsx b/src/components/Monaco/themes/k6StudioLight.tsx
new file mode 100644
index 00000000..2d65c90c
--- /dev/null
+++ b/src/components/Monaco/themes/k6StudioLight.tsx
@@ -0,0 +1,12 @@
+import * as monaco from 'monaco-editor'
+
+export const k6StudioLightBackground = '#fafafa'
+
+monaco.editor.defineTheme('k6-studio-light', {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': k6StudioLightBackground,
+  },
+})
diff --git a/src/components/WebLogView/ResponseDetails/Preview.tsx b/src/components/WebLogView/ResponseDetails/Preview.tsx
index fe9e3619..98742e14 100644
--- a/src/components/WebLogView/ResponseDetails/Preview.tsx
+++ b/src/components/WebLogView/ResponseDetails/Preview.tsx
@@ -2,6 +2,7 @@ import { ReadOnlyEditor } from '../../Monaco/ReadOnlyEditor'
 import ReactJson from '@microlink/react-json-view'
 import { Font } from './Font'
 import { useTheme } from '@/hooks/useTheme'
+import { k6StudioLightBackground } from '@/components/Monaco/themes/k6StudioLight'
 
 interface PreviewProps {
   content: string
@@ -80,5 +81,5 @@ const reactJsonDarkStyles = {
 
 const reactJsonLightStyles = {
   ...reactJsonStyles,
-  background: '#fff',
+  background: k6StudioLightBackground,
 }