feat: add custom monaco editor theme

frontend/src/components/content_value/ContentEditor.vue

@@ -57,6 +57,7 @@ onMounted(async () => {
         const { fontSize, fontFamily = undefined } = pref.generalFont
         editorNode = monaco.editor.create(editorRef.value, {
             // value: props.content,
+            theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
             language: props.language,
             lineNumbers: props.showLineNum ? 'on' : 'off',
             readOnly: readonlyValue.value,
@@ -133,7 +134,7 @@ watch(
     (dark) => {
         if (editorNode != null) {
             editorNode.updateOptions({
-                theme: dark ? 'vs-dark' : 'vs',
+                theme: dark ? 'rdm-dark' : 'rdm-light',
             })
         }
     },

frontend/src/main.js

@@ -9,7 +9,7 @@ import { i18n } from '@/utils/i18n.js'
 import { setupDiscreteApi } from '@/utils/discrete.js'
 import usePreferencesStore from 'stores/preferences.js'
 import { loadEnvironment } from '@/utils/platform.js'
-import { setupMonacoWorker } from '@/utils/monaco_worker.js'
+import { setupMonaco } from '@/utils/monaco.js'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -20,7 +20,7 @@ async function setupApp() {
     app.use(createPinia())
 
     await loadEnvironment()
-    setupMonacoWorker()
+    setupMonaco()
     const prefStore = usePreferencesStore()
     await prefStore.loadPreferences()
     await setupDiscreteApi()

frontend/src/utils/monaco.js

@@ -1,9 +1,10 @@
+import * as monaco from 'monaco-editor'
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 
-export const setupMonacoWorker = () => {
+export const setupMonaco = () => {
     window.MonacoEnvironment = {
         getWorker: (_, label) => {
             switch (label) {
@@ -20,4 +21,23 @@ export const setupMonacoWorker = () => {
             }
         },
     }
+
+    // setup light theme
+    monaco.editor.defineTheme('rdm-light', {
+        base: 'vs',
+        inherit: true,
+        rules: [],
+        colors: {
+            'editorLineNumber.foreground': '#BABBBD',
+            'editorLineNumber.activeForeground': '#777D83',
+        },
+    })
+
+    // setup dark theme
+    monaco.editor.defineTheme('rdm-dark', {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [],
+        colors: {},
+    })
 }