feat: change background color for editor in light theme

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'}
  />
  )
 }

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,
+ },
+})

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,
 }