darkmode is now available

This commit is contained in:
2026-05-07 13:42:46 +02:00
parent ec309eb626
commit 8cb918b064
36 changed files with 588 additions and 489 deletions
+14 -14
View File
@@ -16,7 +16,7 @@ interface DiffViewerProps {
export function DiffViewer({ files }: DiffViewerProps) {
if (!files.length) {
return (
<div className="text-center py-12 text-[#5E6C84] text-sm">
<div className="text-center py-12 text-[var(--c-muted)] text-sm">
No changes in this diff.
</div>
)
@@ -36,9 +36,9 @@ function FileDiffBlock({ file }: { file: FileDiff }) {
const lines = useMemo(() => parsePatch(file.patch), [file.patch])
return (
<div className="border border-[#DFE1E6] rounded overflow-hidden font-mono text-xs">
<div className="border border-[var(--c-border)] rounded overflow-hidden font-mono text-xs">
{/* File header */}
<div className="flex items-center justify-between px-3 py-2 bg-[#F4F5F7] border-b border-[#DFE1E6] gap-2">
<div className="flex items-center justify-between px-3 py-2 bg-[var(--c-surface-muted)] border-b border-[var(--c-border)] gap-2">
<button
onClick={() => setCollapsed(c => !c)}
className="flex items-center gap-2 text-left min-w-0"
@@ -50,17 +50,17 @@ function FileDiffBlock({ file }: { file: FileDiff }) {
>
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
<span className="font-semibold text-[#172B4D] truncate">{file.path}</span>
<span className="font-semibold text-[var(--c-text)] truncate">{file.path}</span>
{file.oldPath && file.oldPath !== file.path && (
<span className="text-[#5E6C84] text-[10px] shrink-0"> {file.oldPath}</span>
<span className="text-[var(--c-muted)] text-[10px] shrink-0"> {file.oldPath}</span>
)}
</button>
<div className="flex items-center gap-2 shrink-0 text-[11px]">
{file.additions > 0 && (
<span className="text-[#00875A] font-semibold">+{file.additions}</span>
<span className="text-[var(--c-success)] font-semibold">+{file.additions}</span>
)}
{file.deletions > 0 && (
<span className="text-[#DE350B] font-semibold">-{file.deletions}</span>
<span className="text-[var(--c-danger)] font-semibold">-{file.deletions}</span>
)}
</div>
</div>
@@ -120,10 +120,10 @@ function parsePatch(patch: string): ParsedLine[] {
function DiffLine({ line }: { line: ParsedLine }) {
if (line.type === 'hunk') {
return (
<tr className="bg-[#DEEBFF]">
<td className="px-2 py-0.5 text-[#5E6C84] select-none w-10 text-right" />
<td className="px-2 py-0.5 text-[#5E6C84] select-none w-10 text-right" />
<td className="px-3 py-0.5 text-[#0052CC] font-semibold whitespace-pre">{line.content}</td>
<tr className="bg-[var(--c-brand-tint)]">
<td className="px-2 py-0.5 text-[var(--c-muted)] select-none w-10 text-right" />
<td className="px-2 py-0.5 text-[var(--c-muted)] select-none w-10 text-right" />
<td className="px-3 py-0.5 text-[var(--c-brand)] font-semibold whitespace-pre">{line.content}</td>
</tr>
)
}
@@ -131,14 +131,14 @@ function DiffLine({ line }: { line: ParsedLine }) {
const bg = line.type === 'added'
? 'bg-[#E3FCEF]'
: line.type === 'removed'
? 'bg-[#FFEBE6]'
? 'bg-[var(--c-danger-tint)]'
: ''
const gutter = line.type === 'added'
? 'bg-[#ABF5D1] text-[#006644]'
: line.type === 'removed'
? 'bg-[#FFBDAD] text-[#BF2600]'
: 'bg-[#F4F5F7] text-[#5E6C84]'
? 'bg-[#FFBDAD] text-[var(--c-danger-dark)]'
: 'bg-[var(--c-surface-muted)] text-[var(--c-muted)]'
const prefix = line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '