authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-28 10:53:55-08:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-02-28 15:17:03-08:00
logfcbb494af745e43642e7bcc97872419c35599de4
tree23d32e3f1ad4eb833076eb4aaa5016ccb1f780f8
parent2980a853e567d97b9e27a9409ecd98a60c4ae42a

Align diff panel surfaces with app theme colors

- add diff-specific wrapper classes in `DiffPanel` for targeted theming - override diff renderer color variables to match card/background palette - soften chat markdown Shiki code-block background for consistency

2 files changed, 56 insertions(+), 2 deletions(-)

apps/web/src/components/DiffPanel.tsx+6-2
...@@ -464,7 +464,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -464,7 +464,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
464 </div>464 </div>
465 ) : renderablePatch.kind === "files" ? (465 ) : renderablePatch.kind === "files" ? (
466 <Virtualizer466 <Virtualizer
467 className="h-full min-h-0 overflow-auto px-3 py-2"467 className="diff-render-surface h-full min-h-0 overflow-auto px-3 py-2"
468 config={{468 config={{
469 overscrollSize: 600,469 overscrollSize: 600,
470 intersectionObserverMargin: 1200,470 intersectionObserverMargin: 1200,
...@@ -475,7 +475,11 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -475,7 +475,11 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
475 const fileKey = buildFileDiffRenderKey(fileDiff);475 const fileKey = buildFileDiffRenderKey(fileDiff);
476 const themedFileKey = `${fileKey}:${resolvedTheme}`;476 const themedFileKey = `${fileKey}:${resolvedTheme}`;
477 return (477 return (
478 <div key={themedFileKey} data-diff-file-path={filePath} className="rounded-md">478 <div
479 key={themedFileKey}
480 data-diff-file-path={filePath}
481 className="diff-render-file rounded-md"
482 >
479 <FileDiff483 <FileDiff
480 fileDiff={fileDiff}484 fileDiff={fileDiff}
481 options={{485 options={{
apps/web/src/index.css+50
...@@ -314,6 +314,10 @@ label:has(> select#reasoning-effort) select {...@@ -314,6 +314,10 @@ label:has(> select#reasoning-effort) select {
314 font-size: 0.875rem;314 font-size: 0.875rem;
315}315}
316316
317.chat-markdown .chat-markdown-shiki .shiki {
318 background: color-mix(in srgb, var(--muted) 78%, var(--background)) !important;
319}
320
317.chat-markdown table {321.chat-markdown table {
318 width: 100%;322 width: 100%;
319 border-collapse: collapse;323 border-collapse: collapse;
...@@ -325,3 +329,49 @@ label:has(> select#reasoning-effort) select {...@@ -325,3 +329,49 @@ label:has(> select#reasoning-effort) select {
325 padding: 0.35rem 0.45rem;329 padding: 0.35rem 0.45rem;
326 text-align: left;330 text-align: left;
327}331}
332
333/* Diffs theme bridge (match diff surfaces to app palette) */
334.diff-render-surface [data-diffs-header],
335.diff-render-surface [data-diff],
336.diff-render-surface [data-file],
337.diff-render-surface [data-error-wrapper],
338.diff-render-surface [data-virtualizer-buffer] {
339 --diffs-light-bg: color-mix(in srgb, var(--card) 92%, var(--background));
340 --diffs-dark-bg: color-mix(in srgb, var(--card) 92%, var(--background));
341
342 --diffs-bg-context-override: color-mix(in srgb, var(--background) 97%, var(--foreground));
343 --diffs-bg-hover-override: color-mix(in srgb, var(--background) 94%, var(--foreground));
344 --diffs-bg-separator-override: color-mix(in srgb, var(--background) 95%, var(--foreground));
345 --diffs-bg-buffer-override: color-mix(in srgb, var(--background) 90%, var(--foreground));
346
347 --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, var(--success));
348 --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, var(--success));
349 --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, var(--success));
350 --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, var(--success));
351
352 --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, var(--destructive));
353 --diffs-bg-deletion-number-override: color-mix(
354 in srgb,
355 var(--background) 88%,
356 var(--destructive)
357 );
358 --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, var(--destructive));
359 --diffs-bg-deletion-emphasis-override: color-mix(
360 in srgb,
361 var(--background) 80%,
362 var(--destructive)
363 );
364}
365
366.diff-render-surface [data-file-info] {
367 background-color: color-mix(in srgb, var(--card) 94%, var(--foreground)) !important;
368 border-block-color: var(--border) !important;
369 color: var(--foreground) !important;
370}
371
372.diff-render-file [data-diff],
373.diff-render-file [data-file] {
374 border: 1px solid var(--border);
375 border-radius: 0.5rem;
376 overflow: clip;
377}