feat(diff-viewer): enhance MonacoDiffViewer with light theme support and background color alignment (#977)

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}

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;

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);
     }