Skip to content

fix: light-theme use white code block #362

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
Sep 26, 2025
+28 −28
Merged

fix: light-theme use white code block #362

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
e7d043b
fix: light-theme use white code block
anrgct Sep 22, 2025
e740581
fix: ligth-theme use white bash block
anrgct Sep 22, 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
46 changes: 23 additions & 23 deletions src/components/ToolWidgets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,8 +505,8 @@ export const ReadResultWidget: React.FC<{ content: string; filePath?: string }>
const isLargeFile = lineCount > 20;

return (
<div className="rounded-lg overflow-hidden border bg-zinc-950 w-full">
<div className="px-4 py-2 border-b bg-zinc-900/50 flex items-center justify-between">
<div className="rounded-lg overflow-hidden border bg-background w-full">
<div className="px-4 py-2 border-b bg-muted/50 flex items-center justify-between">
<div className="flex items-center gap-2">
<FileText className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs font-mono text-muted-foreground">
Expand Down Expand Up @@ -560,7 +560,7 @@ export const ReadResultWidget: React.FC<{ content: string; filePath?: string }>
)}

{isLargeFile && !isExpanded && (
<div className="px-4 py-3 text-xs text-muted-foreground text-center bg-zinc-900/30">
<div className="px-4 py-3 text-xs text-muted-foreground text-center bg-muted/30">
Click "Expand" to view the full file
</div>
)}
Expand Down Expand Up @@ -654,8 +654,8 @@ export const BashWidget: React.FC<{
}

return (
<div className="rounded-lg border bg-zinc-950 overflow-hidden">
<div className="px-4 py-2 bg-zinc-900/50 flex items-center gap-2 border-b">
<div className="rounded-lg border bg-background overflow-hidden">
<div className="px-4 py-2 bg-muted/50 flex items-center gap-2 border-b">
<Terminal className="h-3.5 w-3.5 text-green-500" />
<span className="text-xs font-mono text-muted-foreground">Terminal</span>
{description && (
Expand Down Expand Up @@ -760,9 +760,9 @@ export const WriteWidget: React.FC<{ filePath: string; content: string; result?:
/>

{/* Modal content */}
<div className="relative w-[90vw] h-[90vh] max-w-7xl bg-zinc-950 rounded-lg border shadow-2xl overflow-hidden flex flex-col">
<div className="relative w-[90vw] h-[90vh] max-w-7xl bg-background rounded-lg border shadow-2xl overflow-hidden flex flex-col">
{/* Header */}
<div className="px-6 py-4 border-b bg-zinc-950 flex items-center justify-between">
<div className="px-6 py-4 border-b bg-background flex items-center justify-between">
<div className="flex items-center gap-3">
<FileText className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-mono text-muted-foreground">{filePath}</span>
Expand Down Expand Up @@ -803,15 +803,15 @@ export const WriteWidget: React.FC<{ filePath: string; content: string; result?:

const CodePreview = ({ codeContent, truncated }: { codeContent: string; truncated: boolean }) => (
<div
className="rounded-lg border bg-zinc-950 overflow-hidden w-full"
className="rounded-lg border bg-background overflow-hidden w-full"
style={{
height: truncated ? '440px' : 'auto',
maxHeight: truncated ? '440px' : undefined,
display: 'flex',
flexDirection: 'column'
}}
>
<div className="px-4 py-2 border-b bg-zinc-950 flex items-center justify-between sticky top-0 z-10">
<div className="px-4 py-2 border-b bg-background flex items-center justify-between sticky top-0 z-10">
<span className="text-xs font-mono text-muted-foreground">Preview</span>
{isLargeContent && truncated && (
<div className="flex items-center gap-2">
Expand Down Expand Up @@ -1019,7 +1019,7 @@ export const GrepWidget: React.FC<{
</button>

{isExpanded && (
<div className="rounded-lg border bg-zinc-950 overflow-hidden">
<div className="rounded-lg border bg-background overflow-hidden">
<div className="max-h-[400px] overflow-y-auto">
{grepResults.map((match, idx) => {
const fileName = match.file.split('/').pop() || match.file;
Expand All @@ -1029,7 +1029,7 @@ export const GrepWidget: React.FC<{
<div
key={idx}
className={cn(
"flex items-start gap-3 p-3 border-b border-zinc-800 hover:bg-zinc-900/50 transition-colors",
"flex items-start gap-3 p-3 border-b border-border hover:bg-muted/50 transition-colors",
idx === grepResults.length - 1 && "border-b-0"
)}
>
Expand Down Expand Up @@ -1145,7 +1145,7 @@ export const EditWidget: React.FC<{
</code>
</div>

<div className="rounded-lg border bg-zinc-950 overflow-hidden text-xs font-mono">
<div className="rounded-lg border bg-background overflow-hidden text-xs font-mono">
<div className="max-h-[440px] overflow-y-auto overflow-x-auto">
{diffResult.map((part, index) => {
const partClass = part.added
Expand All @@ -1156,7 +1156,7 @@ export const EditWidget: React.FC<{

if (!part.added && !part.removed && part.count && part.count > 8) {
return (
<div key={index} className="px-4 py-1 bg-zinc-900 border-y border-zinc-800 text-center text-zinc-500 text-xs">
<div key={index} className="px-4 py-1 bg-muted border-y border-border text-center text-muted-foreground text-xs">
... {part.count} unchanged lines ...
</div>
);
Expand Down Expand Up @@ -1241,7 +1241,7 @@ export const EditResultWidget: React.FC<{ content: string }> = ({ content }) =>
const language = getLanguage(filePath);

return (
<div className="rounded-lg border bg-zinc-950 overflow-hidden">
<div className="rounded-lg border bg-background overflow-hidden">
<div className="px-4 py-2 border-b bg-emerald-950/30 flex items-center gap-2">
<GitBranch className="h-3.5 w-3.5 text-emerald-500" />
<span className="text-xs font-mono text-emerald-400">Edit Result</span>
Expand Down Expand Up @@ -1395,10 +1395,10 @@ export const MCPWidget: React.FC<{
)}>
<div className="relative">
<div className={cn(
"rounded-lg border bg-zinc-950/50 overflow-hidden",
"rounded-lg border bg-background/50 overflow-hidden",
!isExpanded && isLargeInput && "max-h-[200px]"
)}>
<div className="px-3 py-2 border-b bg-zinc-900/50 flex items-center gap-2">
<div className="px-3 py-2 border-b bg-muted/50 flex items-center gap-2">
<Code className="h-3 w-3 text-violet-500" />
<span className="text-xs font-mono text-muted-foreground">Parameters</span>
</div>
Expand All @@ -1425,7 +1425,7 @@ export const MCPWidget: React.FC<{

{/* Gradient fade for collapsed view */}
{!isExpanded && isLargeInput && (
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-zinc-950/80 to-transparent pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-background/80 to-transparent pointer-events-none" />
)}
</div>

Expand Down Expand Up @@ -1464,8 +1464,8 @@ export const CommandWidget: React.FC<{
commandArgs?: string;
}> = ({ commandName, commandMessage, commandArgs }) => {
return (
<div className="rounded-lg border bg-zinc-950/50 overflow-hidden">
<div className="px-4 py-2 border-b bg-zinc-900/50 flex items-center gap-2">
<div className="rounded-lg border bg-background/50 overflow-hidden">
<div className="px-4 py-2 border-b bg-muted/50 flex items-center gap-2">
<Terminal className="h-3.5 w-3.5 text-blue-500" />
<span className="text-xs font-mono text-blue-400">Command</span>
</div>
Expand Down Expand Up @@ -1544,8 +1544,8 @@ export const CommandOutputWidget: React.FC<{
};

return (
<div className="rounded-lg border bg-zinc-950/50 overflow-hidden">
<div className="px-4 py-2 bg-zinc-900/50 flex items-center gap-2">
<div className="rounded-lg border bg-background/50 overflow-hidden">
<div className="px-4 py-2 bg-muted/50 flex items-center gap-2">
<ChevronRight className="h-3 w-3 text-green-500" />
<span className="text-xs font-mono text-green-400">Output</span>
</div>
Expand Down Expand Up @@ -1632,7 +1632,7 @@ export const MultiEditWidget: React.FC<{
return (
<div key={index} className="space-y-1">
<div className="text-xs font-medium text-muted-foreground">Edit {index + 1}</div>
<div className="rounded-lg border bg-zinc-950 overflow-hidden text-xs font-mono">
<div className="rounded-lg border bg-background overflow-hidden text-xs font-mono">
<div className="max-h-[300px] overflow-y-auto overflow-x-auto">
{diffResult.map((part, partIndex) => {
const partClass = part.added
Expand All @@ -1643,7 +1643,7 @@ export const MultiEditWidget: React.FC<{

if (!part.added && !part.removed && part.count && part.count > 8) {
return (
<div key={partIndex} className="px-4 py-1 bg-zinc-900 border-y border-zinc-800 text-center text-zinc-500 text-xs">
<div key={partIndex} className="px-4 py-1 bg-muted border-y border-border text-center text-muted-foreground text-xs">
... {part.count} unchanged lines ...
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions src/components/widgets/BashWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ export const BashWidget: React.FC<BashWidgetProps> = ({ command, description, re
}

return (
<div className="rounded-lg border bg-zinc-950 overflow-hidden">
<div className="px-4 py-2 bg-zinc-900/50 flex items-center gap-2 border-b">
<div className="rounded-lg border bg-background overflow-hidden">
<div className="px-4 py-2 bg-muted/50 flex items-center gap-2 border-b">
<Terminal className="h-3.5 w-3.5 text-green-500" />
<span className="text-xs font-mono text-muted-foreground">Terminal</span>
{description && (
Expand All @@ -59,8 +59,8 @@ export const BashWidget: React.FC<BashWidgetProps> = ({ command, description, re
<div className={cn(
"mt-3 p-3 rounded-md border text-xs font-mono whitespace-pre-wrap overflow-x-auto",
isError
? "border-red-500/20 bg-red-500/5 text-red-400"
: "border-green-500/20 bg-green-500/5 text-green-300"
? "border-[color:var(--color-destructive)]/20 bg-[color:var(--color-destructive)]/5 text-[color:var(--color-destructive)]"
: "border-[color:var(--color-green-500)]/20 bg-[color:var(--color-green-500)]/5 text-[color:var(--color-green-500)]"
)}>
{resultContent || (isError ? "Command failed" : "Command completed")}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -726,7 +726,7 @@ html.is-macos body {
}

.prose.dark\:prose-invert pre {
background-color: rgb(13, 17, 23);
/*background-color: rgb(13, 17, 23);*/
border: 1px solid var(--color-border);
}

Expand Down