From e516394580e47f79436ba014a0cf29f5b1cce5f1 Mon Sep 17 00:00:00 2001
From: Haze <709547807@qq.com>
Date: Wed, 6 May 2026 13:44:01 +0800
Subject: [PATCH] feat(diff-viewer): enhance MonacoDiffViewer with light theme
 support and background color alignment (#977)

---
 .../file-preview/MonacoDiffViewer.tsx          |  6 +++++-
 src/styles/globals.css                         | 10 ++++++++++
 tests/e2e/chat-file-changes.spec.ts            | 18 ++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/file-preview/MonacoDiffViewer.tsx b/src/components/file-preview/MonacoDiffViewer.tsx
index 5436fbe..5101258 100644
--- a/src/components/file-preview/MonacoDiffViewer.tsx
+++ b/src/components/file-preview/MonacoDiffViewer.tsx
@@ -7,6 +7,7 @@ import { useMemo } from 'react';
 import { DiffEditor, languageForPath } from '@/lib/monaco/loader';
 import { useSettingsStore } from '@/stores/settings';
 import { LoadingSpinner } from '@/components/common/LoadingSpinner';
+import { cn } from '@/lib/utils';
 
 export interface MonacoDiffViewerProps {
   filePath: string;
@@ -45,7 +46,10 @@ export default function MonacoDiffViewer({
   const left = original ?? '';
 
   return (
-    <div className={className ?? 'h-full w-full min-h-0'}>
+    <div
+      data-testid="monaco-diff-viewer"
+      className={cn('clawx-diff-editor h-full w-full min-h-0', className)}
+    >
       <DiffEditor
         height="100%"
         language={language}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 68e2ce1..532c350 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -154,6 +154,16 @@
   @apply bg-muted-foreground/30;
 }
 
+/* Monaco's default light diff theme is pure white; keep it aligned with ClawX's cream app background. */
+:root:not(.dark) .clawx-diff-editor .monaco-diff-editor,
+:root:not(.dark) .clawx-diff-editor .monaco-editor,
+:root:not(.dark) .clawx-diff-editor .monaco-editor-background,
+:root:not(.dark) .clawx-diff-editor .monaco-editor .margin,
+:root:not(.dark) .clawx-diff-editor .monaco-editor .gutter,
+:root:not(.dark) .clawx-diff-editor .diffOverview {
+  background-color: hsl(var(--background)) !important;
+}
+
 /* macOS traffic light spacing */
 .drag-region {
   -webkit-app-region: drag;
diff --git a/tests/e2e/chat-file-changes.spec.ts b/tests/e2e/chat-file-changes.spec.ts
index 8636bd2..80aeed9 100644
--- a/tests/e2e/chat-file-changes.spec.ts
+++ b/tests/e2e/chat-file-changes.spec.ts
@@ -97,6 +97,11 @@ test.describe('ClawX chat file changes', () => {
       }
 
       await expect(page.getByTestId('main-layout')).toBeVisible();
+      await page.evaluate(() => {
+        const root = document.documentElement;
+        root.classList.remove('dark');
+        root.classList.add('light');
+      });
       await expect(page.getByRole('button', { name: '工作空间' })).toHaveCount(0);
       await expect(page.getByText('查看文件变更')).toHaveCount(0);
 
@@ -108,6 +113,19 @@ test.describe('ClawX chat file changes', () => {
       await fileCard.click();
       await expect(page.locator('aside').getByRole('button', { name: '工作空间' })).toHaveCount(0);
       await expect(fileCard).toContainText('demo.ts');
+
+      const diffBackground = page.getByTestId('monaco-diff-viewer').locator('.monaco-editor-background').first();
+      await expect(diffBackground).toBeVisible({ timeout: 30_000 });
+
+      const colors = await diffBackground.evaluate((element) => {
+        return {
+          diffBackground: window.getComputedStyle(element).backgroundColor,
+          appBackground: window.getComputedStyle(document.body).backgroundColor,
+        };
+      });
+
+      expect(colors.diffBackground).toBe(colors.appBackground);
+      expect(colors.diffBackground).not.toBe('rgb(255, 255, 255)');
     } finally {
       await closeElectronApp(app);
     }