From 43d585cc8587d77fb3da6a9a400e269b9adc0ede Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Thu, 6 Nov 2025 12:14:00 +0100
Subject: [PATCH] fix(editor): watch for colorMode change on diff-editor

---
 .../src/components/content/ContentCardReview.vue    |  2 +-
 .../components/content/ContentEditorConflict.vue    |  2 +-
 src/app/src/composables/useMonacoDiff.ts            | 13 +++++++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/src/components/content/ContentCardReview.vue b/src/app/src/components/content/ContentCardReview.vue
index a8db88fd..a2a9ff1c 100644
--- a/src/app/src/components/content/ContentCardReview.vue
+++ b/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: {
diff --git a/src/app/src/components/content/ContentEditorConflict.vue b/src/app/src/components/content/ContentEditorConflict.vue
index 74d4aab5..fc668f9e 100644
--- a/src/app/src/components/content/ContentEditorConflict.vue
+++ b/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>
 
diff --git a/src/app/src/composables/useMonacoDiff.ts b/src/app/src/composables/useMonacoDiff.ts
index de271e6a..11a78d2e 100644
--- a/src/app/src/composables/useMonacoDiff.ts
+++ b/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),