use k6StudioDarkBackground variable

grafana · Jan 2, 2025 · 2b2a08a · 2b2a08a
1 parent 27e8d04
commit 2b2a08a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/components/Monaco/EditorToolbar.tsx b/src/components/Monaco/EditorToolbar.tsx
@@ -4,6 +4,7 @@ import { k6StudioLightBackground } from './themes/k6StudioLight'
 import { useTheme } from '@/hooks/useTheme'
 import { useLocalStorage } from 'react-use'
 import { WordWrapIcon } from '../icons'
+import { k6StudioDarkBackground } from './themes/k6StudioDark'
 
 export type ToolbarState = {
   wordWrap: 'on' | 'off'
@@ -34,7 +35,8 @@ export const EditorToolbar = ({ getState, actions }: EditorToolbarProps) => {
       p="2"
       justify="end"
       style={{
-        backgroundColor: theme === 'dark' ? '#1e1e1e' : k6StudioLightBackground,
+        backgroundColor:
+          theme === 'dark' ? k6StudioDarkBackground : k6StudioLightBackground,
         borderBottom: `1px solid ${theme === 'dark' ? 'var(--gray-6)' : 'var(--gray-4)'}`,
       }}
     >

diff --git a/src/components/Monaco/ReactMonacoEditor.tsx b/src/components/Monaco/ReactMonacoEditor.tsx
@@ -83,7 +83,7 @@ export function ReactMonacoEditor({
           wordWrap: toolbarState.wordWrap,
         }}
         onMount={handleEditorMount}
-        theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
+        theme={theme === 'dark' ? 'k6-studio-dark' : 'k6-studio-light'}
       />
     </Flex>
   )

diff --git a/src/components/WebLogView/ResponseDetails/Preview.tsx b/src/components/WebLogView/ResponseDetails/Preview.tsx
@@ -3,6 +3,7 @@ import ReactJson from '@microlink/react-json-view'
 import { Font } from './Font'
 import { useTheme } from '@/hooks/useTheme'
 import { k6StudioLightBackground } from '@/components/Monaco/themes/k6StudioLight'
+import { k6StudioDarkBackground } from '@/components/Monaco/themes/k6StudioDark'
 
 interface PreviewProps {
   content: string
@@ -78,7 +79,7 @@ const reactJsonStyles = {
 
 const reactJsonDarkStyles = {
   ...reactJsonStyles,
-  background: '#1e1e1e',
+  background: k6StudioDarkBackground,
 }
 
 const reactJsonLightStyles = {