set styles for light and dark themes

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

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/components/Monaco/themes/k6StudioDark.ts 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
@@ -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,
   },