diff --git a/src/components/Monaco/EditorToolbar.tsx b/src/components/Monaco/EditorToolbar.tsx index 8284b37b..96ee262f 100644 --- 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 index 9ea92c0c..a019dc63 100644 --- 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'} /> ) diff --git a/src/components/Monaco/languages/log.ts b/src/components/Monaco/languages/log.ts new file mode 100644 index 00000000..1675b8e3 --- /dev/null +++ b/src/components/Monaco/languages/log.ts @@ -0,0 +1,13 @@ +import * as monaco from 'monaco-editor' + +monaco.languages.register({ id: 'log' }) +monaco.languages.setMonarchTokensProvider('log', { + tokenizer: { + root: [ + [/\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}.\d{3}]/, 'timestamp'], + [/\[error]/, 'error'], + [/^\s*at.*$/, 'stackTrace'], + [/['"].*?['"]/, 'string'], + ], + }, +}) diff --git a/src/components/Monaco/themes/k6StudioDark.ts b/src/components/Monaco/themes/k6StudioDark.ts new file mode 100644 index 00000000..e335cacf --- /dev/null +++ b/src/components/Monaco/themes/k6StudioDark.ts @@ -0,0 +1,18 @@ +import * as monaco from 'monaco-editor' +import '../languages/log' + +export const k6StudioDarkBackground = '#1E1E1E' + +monaco.editor.defineTheme('k6-studio-dark', { + base: 'vs-dark', + inherit: true, + rules: [ + { token: 'error.log', foreground: '#CE9178', fontStyle: 'bold' }, + { token: 'stackTrace.log', foreground: '#CE9178', fontStyle: 'italic' }, + { token: 'timestamp.log', foreground: '#368F2E' }, + { token: 'string.log', foreground: '#CE9178' }, + ], + colors: { + 'editor.background': k6StudioDarkBackground, + }, +}) diff --git a/src/components/Monaco/themes/k6StudioLight.ts b/src/components/Monaco/themes/k6StudioLight.ts index 2d65c90c..f99f3bf3 100644 --- a/src/components/Monaco/themes/k6StudioLight.ts +++ b/src/components/Monaco/themes/k6StudioLight.ts @@ -1,11 +1,17 @@ import * as monaco from 'monaco-editor' +import '../languages/log' export const k6StudioLightBackground = '#fafafa' monaco.editor.defineTheme('k6-studio-light', { base: 'vs', inherit: true, - rules: [], + rules: [ + { token: 'error.log', foreground: '#A6201E', fontStyle: 'bold' }, + { token: 'stackTrace.log', foreground: '#A6201E', fontStyle: 'italic' }, + { token: 'timestamp.log', foreground: '#368F2E' }, + { token: 'string.log', foreground: '#A6201E' }, + ], colors: { 'editor.background': k6StudioLightBackground, }, diff --git a/src/components/WebLogView/ResponseDetails/Preview.tsx b/src/components/WebLogView/ResponseDetails/Preview.tsx index d66c2765..bc22d4b2 100644 --- 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 = {