Skip to content

Fix theme inconsistencies in terminal and git diff view #8

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

Merged
merged 2 commits into from
Aug 2, 2025
Merged

Fix theme inconsistencies in terminal and git diff view #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39b7ae4
feat: add theme support to ProjectWorkspace, GitDiffView, RightPaneVi…
Krishnachaitanyakc Aug 2, 2025
65648b5
fix: improve layout and overflow handling in GitDiffView component
Krishnachaitanyakc Aug 2, 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
2 changes: 1 addition & 1 deletion src/renderer/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ function AppContent() {
value={project.id}
className="flex-1 m-0 h-full"
>
<ProjectWorkspace projectId={project.id} />
<ProjectWorkspace projectId={project.id} theme={theme} />
</TabsContent>
))}
</Tabs>
Expand Down
113 changes: 74 additions & 39 deletions src/renderer/components/ClaudeTerminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@ import '@xterm/xterm/css/xterm.css';
interface ClaudeTerminalProps {
worktreePath: string;
projectId?: string;
theme?: 'light' | 'dark';
}

// Cache for terminal states per worktree
const terminalStateCache = new Map<string, string>();

export function ClaudeTerminal({ worktreePath }: ClaudeTerminalProps) {
export function ClaudeTerminal({ worktreePath, theme = 'dark' }: ClaudeTerminalProps) {
const terminalRef = useRef<HTMLDivElement>(null);
const [terminal, setTerminal] = useState<Terminal | null>(null);
const processIdRef = useRef<string>('');
Expand All @@ -33,31 +34,61 @@ export function ClaudeTerminal({ worktreePath }: ClaudeTerminalProps) {

console.log('Initializing terminal...');

// Create terminal instance
// Create terminal instance with theme-aware colors
const getTerminalTheme = (currentTheme: 'light' | 'dark') => {
if (currentTheme === 'light') {
return {
background: '#ffffff',
foreground: '#000000',
cursor: '#000000',
cursorAccent: '#ffffff',
selectionBackground: '#b5b5b5',
black: '#000000',
red: '#cd3131',
green: '#0dbc79',
yellow: '#e5e510',
blue: '#2472c8',
magenta: '#bc3fbc',
cyan: '#11a8cd',
white: '#e5e5e5',
brightBlack: '#666666',
brightRed: '#f14c4c',
brightGreen: '#23d18b',
brightYellow: '#f5f543',
brightBlue: '#3b8eea',
brightMagenta: '#d670d6',
brightCyan: '#29b8db',
brightWhite: '#e5e5e5'
};
} else {
return {
background: '#000000',
foreground: '#ffffff',
cursor: '#ffffff',
cursorAccent: '#000000',
selectionBackground: '#4a4a4a',
black: '#000000',
red: '#cd3131',
green: '#0dbc79',
yellow: '#e5e510',
blue: '#2472c8',
magenta: '#bc3fbc',
cyan: '#11a8cd',
white: '#e5e5e5',
brightBlack: '#666666',
brightRed: '#f14c4c',
brightGreen: '#23d18b',
brightYellow: '#f5f543',
brightBlue: '#3b8eea',
brightMagenta: '#d670d6',
brightCyan: '#29b8db',
brightWhite: '#e5e5e5'
};
}
};

const term = new Terminal({
theme: {
background: '#000000',
foreground: '#ffffff',
cursor: '#ffffff',
cursorAccent: '#000000',
selectionBackground: '#4a4a4a',
black: '#000000',
red: '#cd3131',
green: '#0dbc79',
yellow: '#e5e510',
blue: '#2472c8',
magenta: '#bc3fbc',
cyan: '#11a8cd',
white: '#e5e5e5',
brightBlack: '#666666',
brightRed: '#f14c4c',
brightGreen: '#23d18b',
brightYellow: '#f5f543',
brightBlue: '#3b8eea',
brightMagenta: '#d670d6',
brightCyan: '#29b8db',
brightWhite: '#e5e5e5'
},
theme: getTerminalTheme(theme),
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
fontSize: 14,
lineHeight: 1.2,
Expand Down Expand Up @@ -273,28 +304,32 @@ export function ClaudeTerminal({ worktreePath }: ClaudeTerminalProps) {
window.electronAPI.ide.detect().then(setDetectedIDEs);
}, []);

// Update theme
// Update theme when prop changes
useEffect(() => {
if (!terminal) return;

const updateTheme = async () => {
const theme = await window.electronAPI.theme.get();
if (theme === 'dark') {
terminal.options.theme = {
background: '#000000',
foreground: '#ffffff',
};
} else {
terminal.options.theme = {
const getTerminalTheme = (currentTheme: 'light' | 'dark') => {
if (currentTheme === 'light') {
return {
background: '#ffffff',
foreground: '#000000',
cursor: '#000000',
cursorAccent: '#ffffff',
selectionBackground: '#b5b5b5'
};
} else {
return {
background: '#000000',
foreground: '#ffffff',
cursor: '#ffffff',
cursorAccent: '#000000',
selectionBackground: '#4a4a4a'
};
}
};

updateTheme();
window.electronAPI.theme.onChange(updateTheme);
}, [terminal]);
terminal.options.theme = getTerminalTheme(theme);
}, [terminal, theme]);

const handleOpenInIDE = async (ideName: string) => {
try {
Expand Down Expand Up @@ -356,7 +391,7 @@ export function ClaudeTerminal({ worktreePath }: ClaudeTerminalProps) {

<div
ref={terminalRef}
className="flex-1 min-h-0 bg-black"
className={`flex-1 min-h-0 ${theme === 'light' ? 'bg-white' : 'bg-black'}`}
style={{ minHeight: '100px' }}
/>
</div>
Expand Down
18 changes: 11 additions & 7 deletions src/renderer/components/GitDiffView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ interface GitFile {

interface GitDiffViewProps {
worktreePath: string;
theme?: 'light' | 'dark';
}

export function GitDiffView({ worktreePath }: GitDiffViewProps) {
export function GitDiffView({ worktreePath, theme = 'light' }: GitDiffViewProps) {
const [files, setFiles] = useState<GitFile[]>([]);
const [selectedFile, setSelectedFile] = useState<string | null>(null);
const [diffText, setDiffText] = useState<string>('');
Expand Down Expand Up @@ -135,8 +136,8 @@ export function GitDiffView({ worktreePath }: GitDiffViewProps) {
</div>
</div>

<div className="flex-1 flex min-h-0">
<div className="w-80 border-r flex flex-col">
<div className="flex-1 flex min-h-0 overflow-hidden">
<div className="w-80 border-r flex flex-col min-w-0">
<div className="p-3 border-b bg-muted/50">
<h4 className="text-sm font-medium">
{viewMode === 'staged' ? 'Staged Changes' : 'Unstaged Changes'} ({filteredFiles.length})
Expand Down Expand Up @@ -171,7 +172,7 @@ export function GitDiffView({ worktreePath }: GitDiffViewProps) {
</ScrollArea>
</div>

<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
{error ? (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
Expand All @@ -198,8 +199,8 @@ export function GitDiffView({ worktreePath }: GitDiffViewProps) {
</div>
</div>
) : (
<ScrollArea className="flex-1">
<div className="p-4">
<ScrollArea className="flex-1 w-full">
<div className="p-4 w-full overflow-hidden">
<DiffView
data={{
oldFile: {
Expand All @@ -213,8 +214,11 @@ export function GitDiffView({ worktreePath }: GitDiffViewProps) {
hunks: [diffText]
}}
diffViewMode={DiffModeEnum.Split}
diffViewTheme="light"
diffViewTheme={theme}
diffViewHighlight={true}
diffViewWrap={true}
className="w-full"
style={{ maxWidth: '100%', overflow: 'hidden' }}
/>
</div>
</ScrollArea>
Expand Down
4 changes: 3 additions & 1 deletion src/renderer/components/ProjectWorkspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import { useProjects } from '../contexts/ProjectContext';

interface ProjectWorkspaceProps {
projectId: string;
theme?: 'light' | 'dark';
}

export function ProjectWorkspace({ projectId }: ProjectWorkspaceProps) {
export function ProjectWorkspace({ projectId, theme }: ProjectWorkspaceProps) {
const { getProject, setSelectedWorktree, updateProjectWorktrees } = useProjects();
const project = getProject(projectId);

Expand All @@ -26,6 +27,7 @@ export function ProjectWorkspace({ projectId }: ProjectWorkspaceProps) {
<RightPaneView
worktreePath={project.selectedWorktree}
projectId={projectId}
theme={theme}
/>
)}
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/renderer/components/RightPaneView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import { Terminal, GitBranch } from 'lucide-react';
interface RightPaneViewProps {
worktreePath: string;
projectId?: string;
theme?: 'light' | 'dark';
}

export function RightPaneView({ worktreePath, projectId }: RightPaneViewProps) {
export function RightPaneView({ worktreePath, projectId, theme }: RightPaneViewProps) {
const [activeTab, setActiveTab] = useState('terminal');

return (
Expand Down Expand Up @@ -45,14 +46,15 @@ export function RightPaneView({ worktreePath, projectId }: RightPaneViewProps) {
<ClaudeTerminal
worktreePath={worktreePath}
projectId={projectId}
theme={theme}
/>
</TabsContent>

<TabsContent
value="git-diff"
className="flex-1 m-0 h-full"
>
<GitDiffView worktreePath={worktreePath} />
<GitDiffView worktreePath={worktreePath} theme={theme} />
</TabsContent>
</Tabs>
</div>
Expand Down