fix(editor): watch for colorMode change on diff-editor (#64)

Author: farnabaz

src/app/src/components/content/ContentCardReview.vue

@@ -63,7 +63,7 @@ async function initializeEditor() {
       original: gitHubOriginal!,
       modified: modified!,
       language: language.value,
-      colorMode: ui.colorMode.value,
+      colorMode: ui.colorMode,
       editorOptions: {
         // hide unchanged regions
         hideUnchangedRegions: {

src/app/src/components/content/ContentEditorConflict.vue

@@ -39,7 +39,7 @@ useMonacoDiff(diffEditorRef, {
   original: conflict.value?.githubContent || '',
   modified: conflict.value?.localContent || '',
   language: language.value,
-  colorMode: ui.colorMode.value,
+  colorMode: ui.colorMode,
 })
 </script>
 

src/app/src/composables/useMonacoDiff.ts

@@ -6,7 +6,7 @@ export interface UseMonacoDiffOptions {
   original: string
   modified: string
   language: string
-  colorMode?: 'light' | 'dark'
+  colorMode: Ref<'light' | 'dark'>
   editorOptions?: Editor.IStandaloneDiffEditorConstructionOptions
 }
 
@@ -23,9 +23,10 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
     if (!el || isInitialized) return
 
     const monaco = await setupMonaco()
+    const colorMode = unref(options.colorMode) || 'dark'
 
     editor = monaco.createDiffEditor(el, {
-      theme: getTheme(options.colorMode),
+      theme: getTheme(colorMode),
       lineNumbers: 'off',
       readOnly: true,
       renderSideBySide: true,
@@ -36,6 +37,14 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
       ...options.editorOptions,
     })
 
+    // Watch for color mode changes
+    watch(options.colorMode, (newMode) => {
+      editor?.updateOptions({
+        // @ts-expect-error -- theme is missing from IDiffEditorOptions
+        theme: getTheme(newMode),
+      })
+    })
+
     editor.setModel({
       original: monaco.editor.createModel(options.original, options.language),
       modified: monaco.editor.createModel(options.modified, options.language),