fix(editor): support dark/light theme by inlining themes

Author: farnabaz

src/app/src/components/content/ContentEditorCode.vue

@@ -48,7 +48,7 @@ onMounted(async () => {
 
   // create a Monaco editor instance
   editor.value = monaco.createEditor(editorRef.value, {
-    // theme: ui.colorMode.value === 'light' ? 'vs' : 'vs-dark',
+    theme: ui.colorMode.value === 'light' ? 'vitesse-light' : 'vitesse-dark',
     lineNumbers: 'off',
     readOnly: props.readOnly,
     scrollbar: props.readOnly
@@ -92,11 +92,11 @@ onMounted(async () => {
   editor.value.setModel(monaco.editor.createModel(content.value, 'mdc'))
 
   // Set the theme based on the color mode
-  // watch(ui.colorMode, () => {
-  //   editor.value?.updateOptions({
-  //     theme: ui.colorMode.value === 'light' ? 'vs' : 'vs-dark',
-  //   })
-  // })
+  watch(ui.colorMode, () => {
+    editor.value?.updateOptions({
+      theme: ui.colorMode.value === 'light' ? 'vitesse-light' : 'vitesse-dark',
+    })
+  })
 })
 
 function setContent(document: DatabasePageItem) {

src/app/src/utils/monaco/index.ts

@@ -1,5 +1,7 @@
 import { createSingletonPromise } from '@vueuse/core'
 import type { editor as Editor } from 'modern-monaco/editor-core'
+import themeLight from './theme-light'
+import themeDark from './theme-dark'
 
 export { setupSuggestion } from './mdc-compilation'
 export type { editor as Editor } from 'modern-monaco/editor-core'
@@ -20,6 +22,8 @@ export const setupMonaco = createSingletonPromise(async () => {
   }
 
   const monaco: Monaco = await init()
+  monaco.editor.defineTheme('vitesse-light', themeLight)
+  monaco.editor.defineTheme('vitesse-dark', themeDark)
 
   return {
     monaco,