Skip to content

Fix diff editor in light mode showing dark theme #194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Fix diff editor in light mode showing dark theme #194

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
674ce91
Fix light mode diff editor showing dark mode editor
ctate Nov 1, 2025
1bda0c2
Fix cursor agent follow-up bug
ctate Nov 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions components/file-diff-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,9 @@ export function FileDiffViewer({
return null
}

file.initTheme(mounted ? theme : 'light')
// Initialize with the current theme
const currentTheme = mounted ? theme : 'light'
file.initTheme(currentTheme)

// Wrap file.init() in try-catch to handle diff parsing errors
try {
Expand All @@ -219,6 +221,13 @@ export function FileDiffViewer({
}
}, [diffData, mounted, theme, viewMode])

// Re-initialize theme when it changes
useEffect(() => {
if (diffFile && mounted) {
diffFile.initTheme(theme)
}
}, [diffFile, theme, mounted])

if (!selectedFile) {
// Don't show "No file selected" during initial loading
if (isInitialLoading) {
Expand Down Expand Up @@ -271,7 +280,7 @@ export function FileDiffViewer({
return (
<div className="flex items-center justify-center h-full p-4">
<div className="text-center">
<div className="mb-4 text-4xl">📦</div>
<div className="mb-4 text-4xl">??</div>
<p className="text-muted-foreground mb-2 text-sm md:text-base font-medium">Binary File</p>
<p className="text-xs md:text-sm text-muted-foreground">This is binary content and cannot be displayed</p>
</div>
Expand Down Expand Up @@ -369,9 +378,9 @@ export function FileDiffViewer({

try {
return (
<div className="git-diff-view-container w-full">
<div className="git-diff-view-container w-full" data-theme={mounted ? theme : 'light'}>
<DiffView
key={`${selectedFile}-${diffData?.filename}`}
key={`${selectedFile}-${diffData?.filename}-${theme}`}
diffFile={diffFile}
diffViewMode={diffViewMode}
diffViewTheme={mounted ? theme : 'light'}
Expand Down
Loading