From 57dedf1419489912df05b08ec5348d5d204500dc Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 15:57:49 -0700
Subject: [PATCH 01/13] feat(web): customize diff colors and markers

---
 .../src/components/chat/MessagesTimeline.tsx  |   4 +-
 .../diffs/StyledDiffCodeView.test.tsx         |  54 ++++-
 .../components/diffs/StyledDiffCodeView.tsx   |  67 ++++++-
 .../components/settings/SettingsPanels.tsx    | 184 +++++++++++++++++-
 .../settings/settingsSearch.test.ts           |   8 +
 .../src/components/settings/settingsSearch.ts |  10 +
 apps/web/src/lib/diffRendering.ts             |  30 +--
 docs/README.md                                |   1 +
 docs/user/appearance.md                       |  15 ++
 packages/contracts/src/settings.test.ts       |  26 +++
 packages/contracts/src/settings.ts            |  16 ++
 11 files changed, 392 insertions(+), 23 deletions(-)
 create mode 100644 docs/user/appearance.md

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index c90aa771f8d1..c4eacb471aed 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -30,7 +30,6 @@ import {
   type ReactNode,
 } from "react";
 import { LegendList, type LegendListRef } from "@legendapp/list/react";
-import { FileDiff } from "@pierre/diffs/react";
 import {
   deriveTimelineEntries,
   workEntryIndicatesToolFailure,
@@ -45,6 +44,7 @@ import {
   resolveFileDiffPath,
 } from "../../lib/diffRendering";
 import ChatMarkdown from "../ChatMarkdown";
+import { StyledFileDiff } from "../diffs/StyledDiffCodeView";
 import {
   BotIcon,
   CheckIcon,
@@ -1869,7 +1869,7 @@ function UserMessageReviewCommentCard({ comment }: { comment: ReviewCommentConte
       )}
       {renderablePatch?.kind === "files" &&
         renderablePatch.files.map((fileDiff) => (
-          <FileDiff
+          <StyledFileDiff
             key={resolveFileDiffPath(fileDiff)}
             fileDiff={fileDiff}
             options={{
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
index f0cd49abc41d..69fd01a328eb 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
@@ -4,6 +4,8 @@ import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 const testState = vi.hoisted(() => ({
   codeViewClassName: null as string | null,
   codeViewOptions: null as Record<string, unknown> | null,
+  fileDiffClassName: null as string | null,
+  fileDiffOptions: null as Record<string, unknown> | null,
 }));
 
 vi.mock("@pierre/diffs/react", () => ({
@@ -12,14 +14,25 @@ vi.mock("@pierre/diffs/react", () => ({
     testState.codeViewOptions = props.options;
     return null;
   },
+  FileDiff: (props: { className: string; options: Record<string, unknown> }) => {
+    testState.fileDiffClassName = props.className;
+    testState.fileDiffOptions = props.options;
+    return null;
+  },
 }));
 
-import { StyledDiffCodeView } from "./StyledDiffCodeView";
+import {
+  getDiffColorSchemeClassName,
+  StyledDiffCodeView,
+  StyledFileDiff,
+} from "./StyledDiffCodeView";
 
 describe("StyledDiffCodeView", () => {
   beforeEach(() => {
     testState.codeViewClassName = null;
     testState.codeViewOptions = null;
+    testState.fileDiffClassName = null;
+    testState.fileDiffOptions = null;
   });
 
   it("always pairs the shared diff styling with its virtualized geometry", () => {
@@ -36,12 +49,15 @@ describe("StyledDiffCodeView", () => {
     );
 
     expect(testState.codeViewClassName).toBe(
-      "diff-render-surface [--code-background:var(--background)] outline-none min-h-0",
+      "diff-render-surface [--code-background:var(--background)] outline-none " +
+        "[--t3-diff-addition-color:var(--success)] " +
+        "[--t3-diff-deletion-color:var(--destructive)] min-h-0",
     );
     expect(testState.codeViewOptions).toMatchObject({
       theme: "pierre-dark",
       stickyHeaders: true,
       loadDiffFiles,
+      diffIndicators: "bars",
       itemMetrics: {
         diffHeaderHeight: 32,
         hunkSeparatorHeight: 24,
@@ -57,4 +73,38 @@ describe("StyledDiffCodeView", () => {
       expect.stringContaining(")[data-expand-index]\n  [data-unmodified-lines]"),
     );
   });
+
+  it("maps the alternate palette to blue additions and orange deletions", () => {
+    expect(getDiffColorSchemeClassName("orange-blue")).toBe(
+      "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
+    );
+  });
+
+  it("applies the same appearance defaults to compact file diffs", () => {
+    renderToStaticMarkup(
+      <StyledFileDiff
+        fileDiff={{
+          name: "app.ts",
+          type: "change",
+          hunks: [],
+          splitLineCount: 0,
+          unifiedLineCount: 0,
+          isPartial: true,
+          deletionLines: [],
+          additionLines: [],
+        }}
+        options={{ diffStyle: "unified", theme: "pierre-dark" }}
+      />,
+    );
+
+    expect(testState.fileDiffClassName).toContain("[--t3-diff-addition-color:var(--success)]");
+    expect(testState.fileDiffOptions).toMatchObject({
+      diffStyle: "unified",
+      theme: "pierre-dark",
+      diffIndicators: "bars",
+    });
+    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
+      expect.stringContaining("--diffs-addition-color-override"),
+    );
+  });
 });
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
index 14939de09820..42d330f9eccf 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
@@ -4,11 +4,15 @@ import {
   type CodeViewHandle,
   type CodeViewProps,
   type ControlledCodeViewProps,
+  FileDiff,
+  type FileDiffProps,
   type UncontrolledCodeViewProps,
 } from "@pierre/diffs/react";
 /* oxlint-enable eslint/no-restricted-imports */
 import type { Ref } from "react";
+import type { DiffColorScheme } from "@t3tools/contracts/settings";
 
+import { useClientSettings } from "~/hooks/useSettings";
 import { DIFF_SURFACE_THEME_UNSAFE_CSS } from "~/lib/diffRendering";
 
 const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
@@ -258,9 +262,29 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
 }
 `;
 
+const DIFF_COLOR_SCHEME_CLASSES: Record<DiffColorScheme, string> = {
+  "red-green":
+    "[--t3-diff-addition-color:var(--success)] [--t3-diff-deletion-color:var(--destructive)]",
+  "orange-blue": "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
+};
+
+export function getDiffColorSchemeClassName(scheme: DiffColorScheme): string {
+  return DIFF_COLOR_SCHEME_CLASSES[scheme];
+}
+
+function getDiffSurfaceClassName(colorScheme: DiffColorScheme, className?: string): string {
+  return [
+    "diff-render-surface [--code-background:var(--background)] outline-none",
+    getDiffColorSchemeClassName(colorScheme),
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
 export type StyledDiffCodeViewOptions<LAnnotation> = Omit<
   NonNullable<CodeViewProps<LAnnotation>["options"]>,
-  "unsafeCSS" | "itemMetrics" | "layout"
+  "unsafeCSS" | "itemMetrics" | "layout" | "diffIndicators"
 >;
 
 type StyledDiffCodeViewProps<LAnnotation> = (
@@ -284,19 +308,19 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
   unsafeCSSExtra,
   ...props
 }: StyledDiffCodeViewProps<LAnnotation>) {
+  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
+  const diffIndicatorStyle = useClientSettings((settings) => settings.diffIndicatorStyle);
+
   return (
     <CodeView<LAnnotation>
       {...props}
       {...(viewerRef ? { ref: viewerRef } : {})}
       // The custom element itself is focusable for keyboard scrolling. Its native outline sits
       // outside the panel clipping boundary; actual controls inside retain their own indicators.
-      className={
-        className
-          ? `diff-render-surface [--code-background:var(--background)] outline-none ${className}`
-          : "diff-render-surface [--code-background:var(--background)] outline-none"
-      }
+      className={getDiffSurfaceClassName(diffColorScheme, className)}
       options={{
         ...options,
+        diffIndicators: diffIndicatorStyle,
         unsafeCSS: unsafeCSSExtra
           ? `${DIFF_VIEW_UNSAFE_CSS}\n${unsafeCSSExtra}`
           : DIFF_VIEW_UNSAFE_CSS,
@@ -320,3 +344,34 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
     />
   );
 }
+
+export type StyledFileDiffOptions<LAnnotation> = Omit<
+  NonNullable<FileDiffProps<LAnnotation>["options"]>,
+  "unsafeCSS" | "diffIndicators"
+>;
+
+type StyledFileDiffProps<LAnnotation> = Omit<FileDiffProps<LAnnotation>, "options"> & {
+  readonly options?: StyledFileDiffOptions<LAnnotation>;
+};
+
+/** The non-virtualized counterpart used for compact inline review-comment diffs. */
+export function StyledFileDiff<LAnnotation = undefined>({
+  options,
+  className,
+  ...props
+}: StyledFileDiffProps<LAnnotation>) {
+  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
+  const diffIndicatorStyle = useClientSettings((settings) => settings.diffIndicatorStyle);
+
+  return (
+    <FileDiff<LAnnotation>
+      {...props}
+      className={getDiffSurfaceClassName(diffColorScheme, className)}
+      options={{
+        ...options,
+        diffIndicators: diffIndicatorStyle,
+        unsafeCSS: DIFF_SURFACE_THEME_UNSAFE_CSS,
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index e3f00c1e0e23..8ff0ebfd954a 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -19,6 +19,8 @@ import {
 import {
   DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE,
   DEFAULT_UNIFIED_SETTINGS,
+  type DiffColorScheme,
+  type DiffIndicatorStyle,
   type EnvironmentIdentificationMode,
   MAX_CODE_FONT_SIZE,
   MAX_GLASS_OPACITY,
@@ -75,7 +77,7 @@ import {
   sortProviderInstanceEntries,
 } from "../../providerInstances";
 import { ensureLocalApi, readLocalApi } from "../../localApi";
-import { isMacPlatform } from "../../lib/utils";
+import { cn, isMacPlatform } from "../../lib/utils";
 import { primaryServerObservabilityAtom, primaryServerProvidersAtom } from "../../state/server";
 import { useProjects } from "../../state/entities";
 import { useArchivedThreadSnapshots } from "../../lib/archivedThreadsState";
@@ -498,6 +500,12 @@ export function useSettingsRestore(onRestored?: () => void) {
         : []),
       ...(settings.wordWrap !== DEFAULT_UNIFIED_SETTINGS.wordWrap ? ["Word wrap"] : []),
       ...getChangedTypographySettingLabels(settings),
+      ...(settings.diffColorScheme !== DEFAULT_UNIFIED_SETTINGS.diffColorScheme
+        ? ["Diff colors"]
+        : []),
+      ...(settings.diffIndicatorStyle !== DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle
+        ? ["Diff markers"]
+        : []),
       ...(settings.diffIgnoreWhitespace !== DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace
         ? ["Diff whitespace changes"]
         : []),
@@ -549,6 +557,8 @@ export function useSettingsRestore(onRestored?: () => void) {
       settings.addProjectBaseDirectory,
       settings.defaultThreadEnvMode,
       settings.newWorktreesStartFromOrigin,
+      settings.diffColorScheme,
+      settings.diffIndicatorStyle,
       settings.diffIgnoreWhitespace,
       settings.environmentIdentificationMode,
       settings.fontFamilyCode,
@@ -639,6 +649,8 @@ export function useSettingsRestore(onRestored?: () => void) {
     updateSettings({
       timestampFormat: DEFAULT_UNIFIED_SETTINGS.timestampFormat,
       wordWrap: DEFAULT_UNIFIED_SETTINGS.wordWrap,
+      diffColorScheme: DEFAULT_UNIFIED_SETTINGS.diffColorScheme,
+      diffIndicatorStyle: DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle,
       diffIgnoreWhitespace: DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace,
       environmentIdentificationMode: DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode,
       glassOpacity: DEFAULT_UNIFIED_SETTINGS.glassOpacity,
@@ -961,6 +973,110 @@ function BackgroundActivityAdvancedDialog({
   );
 }
 
+function DiffPreviewLine({
+  color,
+  label,
+  marker,
+  showBar,
+}: {
+  readonly color: string;
+  readonly label: string;
+  readonly marker?: "+" | "-";
+  readonly showBar?: boolean;
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      className="relative block h-4 overflow-hidden px-1.5 text-left font-mono text-[10px] leading-4 font-semibold text-foreground"
+      style={
+        {
+          "--diff-preview-color": color,
+          backgroundColor: "color-mix(in srgb, var(--background) 72%, var(--diff-preview-color))",
+        } as CSSProperties
+      }
+    >
+      {showBar ? (
+        <span
+          className="absolute inset-y-0 left-0 w-0.5"
+          style={{ backgroundColor: "var(--diff-preview-color)" }}
+        />
+      ) : null}
+      {marker ? `${marker} ` : ""}
+      {label}
+    </span>
+  );
+}
+
+function DiffAppearanceChoice<T extends string>({
+  children,
+  label,
+  onSelect,
+  selected,
+  value,
+}: {
+  readonly children: ReactNode;
+  readonly label: string;
+  readonly onSelect: (value: T) => void;
+  readonly selected: boolean;
+  readonly value: T;
+}) {
+  return (
+    <button
+      aria-label={label}
+      aria-pressed={selected}
+      className={cn(
+        "w-16 overflow-hidden rounded-lg border-2 bg-background p-1 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        selected
+          ? "border-primary ring-1 ring-primary/25"
+          : "border-border/70 hover:border-foreground/30",
+      )}
+      onClick={() => onSelect(value)}
+      type="button"
+    >
+      <span className="block overflow-hidden rounded-sm">{children}</span>
+    </button>
+  );
+}
+
+function DiffColorPreview({ scheme }: { readonly scheme: DiffColorScheme }) {
+  const deletionColor = scheme === "orange-blue" ? "var(--warning)" : "var(--destructive)";
+  const additionColor = scheme === "orange-blue" ? "var(--info)" : "var(--success)";
+
+  return (
+    <>
+      <DiffPreviewLine color={deletionColor} label="old" />
+      <DiffPreviewLine color={additionColor} label="new" />
+    </>
+  );
+}
+
+function DiffIndicatorPreview({
+  colorScheme,
+  style,
+}: {
+  readonly colorScheme: DiffColorScheme;
+  readonly style: DiffIndicatorStyle;
+}) {
+  const deletionColor = colorScheme === "orange-blue" ? "var(--warning)" : "var(--destructive)";
+  const additionColor = colorScheme === "orange-blue" ? "var(--info)" : "var(--success)";
+  const classic = style === "classic";
+
+  return (
+    <>
+      <DiffPreviewLine
+        color={deletionColor}
+        label="old"
+        {...(classic ? { marker: "-" as const } : { showBar: true })}
+      />
+      <DiffPreviewLine
+        color={additionColor}
+        label="new"
+        {...(classic ? { marker: "+" as const } : { showBar: true })}
+      />
+    </>
+  );
+}
+
 export function AppearanceSettingsPanel() {
   const {
     appearanceMode,
@@ -1005,6 +1121,72 @@ export function AppearanceSettingsPanel() {
           />
         </div>
 
+        <SettingsRow
+          {...searchableSetting("diff-colors")}
+          description="Choose the colors marking added and deleted lines in diffs."
+          resetAction={
+            settings.diffColorScheme !== DEFAULT_UNIFIED_SETTINGS.diffColorScheme ? (
+              <SettingResetButton
+                label="diff colors"
+                onClick={() =>
+                  updateSettings({ diffColorScheme: DEFAULT_UNIFIED_SETTINGS.diffColorScheme })
+                }
+              />
+            ) : null
+          }
+          control={
+            <div aria-label="Diff colors" className="flex items-center gap-2" role="group">
+              {(["red-green", "orange-blue"] as const).map((scheme) => (
+                <DiffAppearanceChoice
+                  key={scheme}
+                  label={
+                    scheme === "red-green"
+                      ? "Red and green diff colors"
+                      : "Orange and blue diff colors"
+                  }
+                  onSelect={(diffColorScheme) => updateSettings({ diffColorScheme })}
+                  selected={settings.diffColorScheme === scheme}
+                  value={scheme}
+                >
+                  <DiffColorPreview scheme={scheme} />
+                </DiffAppearanceChoice>
+              ))}
+            </div>
+          }
+        />
+
+        <SettingsRow
+          {...searchableSetting("diff-markers")}
+          description="Show + and − markers on added and deleted diff lines."
+          resetAction={
+            settings.diffIndicatorStyle !== DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle ? (
+              <SettingResetButton
+                label="diff markers"
+                onClick={() =>
+                  updateSettings({
+                    diffIndicatorStyle: DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <div aria-label="Diff markers" className="flex items-center gap-2" role="group">
+              {(["bars", "classic"] as const).map((style) => (
+                <DiffAppearanceChoice
+                  key={style}
+                  label={style === "bars" ? "Bar diff indicators" : "Plus and minus diff markers"}
+                  onSelect={(diffIndicatorStyle) => updateSettings({ diffIndicatorStyle })}
+                  selected={settings.diffIndicatorStyle === style}
+                  value={style}
+                >
+                  <DiffIndicatorPreview colorScheme={settings.diffColorScheme} style={style} />
+                </DiffAppearanceChoice>
+              ))}
+            </div>
+          }
+        />
+
         <SettingsRow
           {...searchableSetting("setting-glass-opacity")}
           description="Control how transparent glass surfaces are. Higher values make menus, dialogs, and the composer more solid."
diff --git a/apps/web/src/components/settings/settingsSearch.test.ts b/apps/web/src/components/settings/settingsSearch.test.ts
index 09fd7a9a6a0b..2d04b47ad642 100644
--- a/apps/web/src/components/settings/settingsSearch.test.ts
+++ b/apps/web/src/components/settings/settingsSearch.test.ts
@@ -84,6 +84,14 @@ describe("searchSettings", () => {
       id: "word-wrap",
       to: "/settings/appearance",
     });
+    expect(searchSettings("diff colors")[0]).toMatchObject({
+      id: "diff-colors",
+      to: "/settings/appearance",
+    });
+    expect(searchSettings("diff markers")[0]).toMatchObject({
+      id: "diff-markers",
+      to: "/settings/appearance",
+    });
     expect(searchSettings("environment identification")[0]).toMatchObject({
       id: "environment-identification",
       to: "/settings/appearance",
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index e49f77a834eb..b03c52049840 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -63,6 +63,16 @@ export const SETTINGS_SEARCH_ITEMS = [
     title: "Glass opacity",
     to: "/settings/appearance",
   },
+  {
+    id: "diff-colors",
+    title: "Diff colors",
+    to: "/settings/appearance",
+  },
+  {
+    id: "diff-markers",
+    title: "Diff markers",
+    to: "/settings/appearance",
+  },
   {
     id: "environment-identification",
     title: "Environment identification",
diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts
index c1556981743d..81e561cdd78a 100644
--- a/apps/web/src/lib/diffRendering.ts
+++ b/apps/web/src/lib/diffRendering.ts
@@ -204,6 +204,8 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = `
   --diffs-dark-bg: var(--code-background) !important;
   --diffs-token-light-bg: transparent;
   --diffs-token-dark-bg: transparent;
+  --diffs-addition-color-override: var(--t3-diff-addition-color, var(--success)) !important;
+  --diffs-deletion-color-override: var(--t3-diff-deletion-color, var(--destructive)) !important;
 
   /* Gutter, context, and row tints all derive from the code surface the diff
      body sits on — mixing from the canvas leaves the gutter looking unthemed
@@ -218,37 +220,41 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = `
   --diffs-bg-buffer-override: color-mix(in srgb, var(--code-background) 90%, var(--code-foreground));
 
   --diffs-bg-addition-override: light-dark(
-    color-mix(in srgb, var(--code-background) 50%, var(--success)),
-    color-mix(in srgb, var(--code-background) 70%, var(--success))
+    color-mix(in srgb, var(--code-background) 50%, var(--diffs-addition-color-override)),
+    color-mix(in srgb, var(--code-background) 70%, var(--diffs-addition-color-override))
   );
   --diffs-bg-addition-number-override: light-dark(
-    color-mix(in srgb, var(--code-background) 35%, var(--success)),
-    color-mix(in srgb, var(--code-background) 60%, var(--success))
+    color-mix(in srgb, var(--code-background) 35%, var(--diffs-addition-color-override)),
+    color-mix(in srgb, var(--code-background) 60%, var(--diffs-addition-color-override))
+  );
+  --diffs-bg-addition-hover-override: color-mix(
+    in srgb,
+    var(--code-background) 85%,
+    var(--diffs-addition-color-override)
   );
-  --diffs-bg-addition-hover-override: color-mix(in srgb, var(--code-background) 85%, var(--success));
   --diffs-bg-addition-emphasis-override: color-mix(
     in srgb,
     var(--code-background) 80%,
-    var(--success)
+    var(--diffs-addition-color-override)
   );
 
   --diffs-bg-deletion-override: light-dark(
-    color-mix(in srgb, var(--code-background) 50%, var(--destructive)),
-    color-mix(in srgb, var(--code-background) 70%, var(--destructive))
+    color-mix(in srgb, var(--code-background) 50%, var(--diffs-deletion-color-override)),
+    color-mix(in srgb, var(--code-background) 70%, var(--diffs-deletion-color-override))
   );
   --diffs-bg-deletion-number-override: light-dark(
-    color-mix(in srgb, var(--code-background) 35%, var(--destructive)),
-    color-mix(in srgb, var(--code-background) 60%, var(--destructive))
+    color-mix(in srgb, var(--code-background) 35%, var(--diffs-deletion-color-override)),
+    color-mix(in srgb, var(--code-background) 60%, var(--diffs-deletion-color-override))
   );
   --diffs-bg-deletion-hover-override: color-mix(
     in srgb,
     var(--code-background) 85%,
-    var(--destructive)
+    var(--diffs-deletion-color-override)
   );
   --diffs-bg-deletion-emphasis-override: color-mix(
     in srgb,
     var(--code-background) 80%,
-    var(--destructive)
+    var(--diffs-deletion-color-override)
   );
 
   background-color: var(--diffs-bg) !important;
diff --git a/docs/README.md b/docs/README.md
index f1698a66e179..b8d53af6aae0 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,6 +8,7 @@
 - [Organizing threads](./user/thread-sidebar.md)
 - [Review usage](./user/usage.md)
 - [Customize a project icon](./user/project-settings.md)
+- [Web and desktop appearance](./user/appearance.md)
 - [Mobile appearance](./user/mobile-appearance.md)
 - [Remote access](./user/remote-access.md)
 - [Keeping app and server in sync](./user/updating.md)
diff --git a/docs/user/appearance.md b/docs/user/appearance.md
new file mode 100644
index 000000000000..427b7cc81085
--- /dev/null
+++ b/docs/user/appearance.md
@@ -0,0 +1,15 @@
+# Web and desktop appearance
+
+Open **Settings** → **Appearance** to choose the theme, interface transparency, fonts, and code
+display preferences used by the web and desktop apps.
+
+## Diff appearance
+
+**Diff colors** switches between the standard red/green palette and an orange/blue palette. The
+selected colors apply to added and deleted rows, line-number gutters, and diff headers.
+
+**Diff markers** switches between compact bar indicators and classic `+` and `−` markers at the
+start of changed lines.
+
+These preferences are stored on the current device and apply to the main diff panel, pull request
+reviews, and inline review-comment diffs.
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index 570157292b54..29f5987e5b4d 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -33,6 +33,32 @@ describe("ClientSettings word wrap", () => {
   });
 });
 
+describe("ClientSettings diff appearance", () => {
+  it("preserves the existing colors and bar indicators by default", () => {
+    const settings = decodeClientSettings({});
+
+    expect(settings.diffColorScheme).toBe("red-green");
+    expect(settings.diffIndicatorStyle).toBe("bars");
+  });
+
+  it("accepts the alternate colors and classic line markers", () => {
+    expect(
+      decodeClientSettingsPatch({
+        diffColorScheme: "orange-blue",
+        diffIndicatorStyle: "classic",
+      }),
+    ).toMatchObject({
+      diffColorScheme: "orange-blue",
+      diffIndicatorStyle: "classic",
+    });
+  });
+
+  it("rejects unsupported diff appearance values", () => {
+    expect(() => decodeClientSettings({ diffColorScheme: "purple-yellow" })).toThrow();
+    expect(() => decodeClientSettingsPatch({ diffIndicatorStyle: "none" })).toThrow();
+  });
+});
+
 describe("ClientSettings glass opacity", () => {
   it("defaults to a readable translucent surface", () => {
     expect(decodeClientSettings({}).glassOpacity).toBe(80);
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 143087b35430..881c9f95575b 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -112,6 +112,14 @@ export const EnvironmentIdentificationMode = Schema.Literals(["artwork", "pill",
 export type EnvironmentIdentificationMode = typeof EnvironmentIdentificationMode.Type;
 export const DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE: EnvironmentIdentificationMode = "artwork";
 
+export const DiffColorScheme = Schema.Literals(["red-green", "orange-blue"]);
+export type DiffColorScheme = typeof DiffColorScheme.Type;
+export const DEFAULT_DIFF_COLOR_SCHEME: DiffColorScheme = "red-green";
+
+export const DiffIndicatorStyle = Schema.Literals(["bars", "classic"]);
+export type DiffIndicatorStyle = typeof DiffIndicatorStyle.Type;
+export const DEFAULT_DIFF_INDICATOR_STYLE: DiffIndicatorStyle = "bars";
+
 /**
  * A user-chosen font family (a single name or a comma-separated list). Empty
  * means "use the app default"; clients compose their own fallback stacks.
@@ -155,6 +163,12 @@ export const ClientSettingsSchema = Schema.Struct({
   dismissedProviderUpdateNotificationKeys: Schema.Array(TrimmedNonEmptyString).pipe(
     Schema.withDecodingDefault(Effect.succeed([])),
   ),
+  diffColorScheme: DiffColorScheme.pipe(
+    Schema.withDecodingDefault(Effect.succeed(DEFAULT_DIFF_COLOR_SCHEME)),
+  ),
+  diffIndicatorStyle: DiffIndicatorStyle.pipe(
+    Schema.withDecodingDefault(Effect.succeed(DEFAULT_DIFF_INDICATOR_STYLE)),
+  ),
   diffIgnoreWhitespace: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
   environmentIdentificationMode: EnvironmentIdentificationMode.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE)),
@@ -814,6 +828,8 @@ export const ClientSettingsPatch = Schema.Struct({
   confirmQuit: Schema.optionalKey(Schema.Boolean),
   confirmThreadArchive: Schema.optionalKey(Schema.Boolean),
   confirmThreadDelete: Schema.optionalKey(Schema.Boolean),
+  diffColorScheme: Schema.optionalKey(DiffColorScheme),
+  diffIndicatorStyle: Schema.optionalKey(DiffIndicatorStyle),
   diffIgnoreWhitespace: Schema.optionalKey(Schema.Boolean),
   environmentIdentificationMode: Schema.optionalKey(EnvironmentIdentificationMode),
   glassOpacity: Schema.optionalKey(GlassOpacity),

From dc4a888ae21c4b9403a01c475a72b0c97a560313 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 16:01:49 -0700
Subject: [PATCH 02/13] test(desktop): cover diff appearance settings

---
 apps/desktop/src/settings/DesktopClientSettings.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index 1c17d58215ea..f9eaf269a957 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -21,7 +21,9 @@ const clientSettings: ClientSettings = {
   confirmThreadArchive: true,
   confirmThreadDelete: false,
   dismissedProviderUpdateNotificationKeys: [],
+  diffColorScheme: "orange-blue",
   diffIgnoreWhitespace: true,
+  diffIndicatorStyle: "classic",
   environmentIdentificationMode: "artwork",
   favorites: [],
   fontFamilyCode: "",

From 053c326b199d4a0e419652849ef8dff7556d89a2 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 16:08:47 -0700
Subject: [PATCH 03/13] fix(web): apply diff palette across diff chrome

---
 apps/web/src/components/diffs/StyledDiffCodeView.test.tsx | 6 ++++++
 apps/web/src/components/settings/SettingsPanels.tsx       | 2 +-
 apps/web/src/lib/diffRendering.ts                         | 2 ++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
index 69fd01a328eb..89d7d34450d8 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
@@ -106,5 +106,11 @@ describe("StyledDiffCodeView", () => {
     expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
       expect.stringContaining("--diffs-addition-color-override"),
     );
+    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
+      expect.stringContaining("--diffs-addition-base: var(--diffs-addition-color-override)"),
+    );
+    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
+      expect.stringContaining("--diffs-deletion-base: var(--diffs-deletion-color-override)"),
+    );
   });
 });
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 8ff0ebfd954a..b76c33b15323 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1025,7 +1025,7 @@ function DiffAppearanceChoice<T extends string>({
       aria-label={label}
       aria-pressed={selected}
       className={cn(
-        "w-16 overflow-hidden rounded-lg border-2 bg-background p-1 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        "w-16 cursor-pointer overflow-hidden rounded-lg border-2 bg-background p-1 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
         selected
           ? "border-primary ring-1 ring-primary/25"
           : "border-border/70 hover:border-foreground/30",
diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts
index 81e561cdd78a..7a05077f355a 100644
--- a/apps/web/src/lib/diffRendering.ts
+++ b/apps/web/src/lib/diffRendering.ts
@@ -206,6 +206,8 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = `
   --diffs-token-dark-bg: transparent;
   --diffs-addition-color-override: var(--t3-diff-addition-color, var(--success)) !important;
   --diffs-deletion-color-override: var(--t3-diff-deletion-color, var(--destructive)) !important;
+  --diffs-addition-base: var(--diffs-addition-color-override) !important;
+  --diffs-deletion-base: var(--diffs-deletion-color-override) !important;
 
   /* Gutter, context, and row tints all derive from the code surface the diff
      body sits on — mixing from the canvas leaves the gutter looking unthemed

From 5a4b464eac84e961362667154e14d9c0b00921ff Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 16:12:46 -0700
Subject: [PATCH 04/13] fix(web): keep diff palette mapping in sync

---
 .../diffs/StyledDiffCodeView.test.tsx         |  7 ++----
 .../components/diffs/StyledDiffCodeView.tsx   | 12 +---------
 .../components/settings/SettingsPanels.tsx    | 22 ++++++++-----------
 apps/web/src/lib/diffRendering.ts             | 11 ++++++++++
 4 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
index 89d7d34450d8..74159b590364 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
@@ -21,11 +21,8 @@ vi.mock("@pierre/diffs/react", () => ({
   },
 }));
 
-import {
-  getDiffColorSchemeClassName,
-  StyledDiffCodeView,
-  StyledFileDiff,
-} from "./StyledDiffCodeView";
+import { StyledDiffCodeView, StyledFileDiff } from "./StyledDiffCodeView";
+import { getDiffColorSchemeClassName } from "~/lib/diffRendering";
 
 describe("StyledDiffCodeView", () => {
   beforeEach(() => {
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
index 42d330f9eccf..885270dce8ad 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
@@ -13,7 +13,7 @@ import type { Ref } from "react";
 import type { DiffColorScheme } from "@t3tools/contracts/settings";
 
 import { useClientSettings } from "~/hooks/useSettings";
-import { DIFF_SURFACE_THEME_UNSAFE_CSS } from "~/lib/diffRendering";
+import { DIFF_SURFACE_THEME_UNSAFE_CSS, getDiffColorSchemeClassName } from "~/lib/diffRendering";
 
 const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
 :is(
@@ -262,16 +262,6 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
 }
 `;
 
-const DIFF_COLOR_SCHEME_CLASSES: Record<DiffColorScheme, string> = {
-  "red-green":
-    "[--t3-diff-addition-color:var(--success)] [--t3-diff-deletion-color:var(--destructive)]",
-  "orange-blue": "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
-};
-
-export function getDiffColorSchemeClassName(scheme: DiffColorScheme): string {
-  return DIFF_COLOR_SCHEME_CLASSES[scheme];
-}
-
 function getDiffSurfaceClassName(colorScheme: DiffColorScheme, className?: string): string {
   return [
     "diff-render-surface [--code-background:var(--background)] outline-none",
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index b76c33b15323..97b696af0fc2 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -77,6 +77,7 @@ import {
   sortProviderInstanceEntries,
 } from "../../providerInstances";
 import { ensureLocalApi, readLocalApi } from "../../localApi";
+import { getDiffColorSchemeClassName } from "../../lib/diffRendering";
 import { cn, isMacPlatform } from "../../lib/utils";
 import { primaryServerObservabilityAtom, primaryServerProvidersAtom } from "../../state/server";
 import { useProjects } from "../../state/entities";
@@ -1039,14 +1040,11 @@ function DiffAppearanceChoice<T extends string>({
 }
 
 function DiffColorPreview({ scheme }: { readonly scheme: DiffColorScheme }) {
-  const deletionColor = scheme === "orange-blue" ? "var(--warning)" : "var(--destructive)";
-  const additionColor = scheme === "orange-blue" ? "var(--info)" : "var(--success)";
-
   return (
-    <>
-      <DiffPreviewLine color={deletionColor} label="old" />
-      <DiffPreviewLine color={additionColor} label="new" />
-    </>
+    <span className={getDiffColorSchemeClassName(scheme)}>
+      <DiffPreviewLine color="var(--t3-diff-deletion-color)" label="old" />
+      <DiffPreviewLine color="var(--t3-diff-addition-color)" label="new" />
+    </span>
   );
 }
 
@@ -1057,23 +1055,21 @@ function DiffIndicatorPreview({
   readonly colorScheme: DiffColorScheme;
   readonly style: DiffIndicatorStyle;
 }) {
-  const deletionColor = colorScheme === "orange-blue" ? "var(--warning)" : "var(--destructive)";
-  const additionColor = colorScheme === "orange-blue" ? "var(--info)" : "var(--success)";
   const classic = style === "classic";
 
   return (
-    <>
+    <span className={getDiffColorSchemeClassName(colorScheme)}>
       <DiffPreviewLine
-        color={deletionColor}
+        color="var(--t3-diff-deletion-color)"
         label="old"
         {...(classic ? { marker: "-" as const } : { showBar: true })}
       />
       <DiffPreviewLine
-        color={additionColor}
+        color="var(--t3-diff-addition-color)"
         label="new"
         {...(classic ? { marker: "+" as const } : { showBar: true })}
       />
-    </>
+    </span>
   );
 }
 
diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts
index 7a05077f355a..2d910f89ce12 100644
--- a/apps/web/src/lib/diffRendering.ts
+++ b/apps/web/src/lib/diffRendering.ts
@@ -1,5 +1,16 @@
 import { parsePatchFiles } from "@pierre/diffs/utils/parsePatchFiles";
 import type { FileDiffMetadata } from "@pierre/diffs/types";
+import type { DiffColorScheme } from "@t3tools/contracts/settings";
+
+const DIFF_COLOR_SCHEME_CLASSES: Record<DiffColorScheme, string> = {
+  "red-green":
+    "[--t3-diff-addition-color:var(--success)] [--t3-diff-deletion-color:var(--destructive)]",
+  "orange-blue": "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
+};
+
+export function getDiffColorSchemeClassName(scheme: DiffColorScheme): string {
+  return DIFF_COLOR_SCHEME_CLASSES[scheme];
+}
 
 export const DIFF_THEME_NAMES = {
   light: "pierre-light",

From 05096bd4b30ee51cc23bf991e46b9e88b1dc4673 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 18:00:03 -0700
Subject: [PATCH 05/13] refactor(web): trim diff appearance settings

---
 .../diffs/StyledDiffCodeView.test.tsx         |  53 +-----
 .../components/diffs/StyledDiffCodeView.tsx   |  25 +--
 .../components/settings/SettingsPanels.tsx    | 157 ++++++------------
 .../settings/settingsSearch.test.ts           |   8 -
 apps/web/src/lib/diffRendering.ts             |  10 +-
 docs/README.md                                |   2 +-
 docs/user/appearance.md                       |  14 +-
 packages/contracts/src/settings.test.ts       |  36 +---
 packages/contracts/src/settings.ts            |  10 +-
 9 files changed, 77 insertions(+), 238 deletions(-)

diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
index 74159b590364..cccfe7a96854 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
@@ -4,8 +4,6 @@ import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 const testState = vi.hoisted(() => ({
   codeViewClassName: null as string | null,
   codeViewOptions: null as Record<string, unknown> | null,
-  fileDiffClassName: null as string | null,
-  fileDiffOptions: null as Record<string, unknown> | null,
 }));
 
 vi.mock("@pierre/diffs/react", () => ({
@@ -14,22 +12,15 @@ vi.mock("@pierre/diffs/react", () => ({
     testState.codeViewOptions = props.options;
     return null;
   },
-  FileDiff: (props: { className: string; options: Record<string, unknown> }) => {
-    testState.fileDiffClassName = props.className;
-    testState.fileDiffOptions = props.options;
-    return null;
-  },
+  FileDiff: () => null,
 }));
 
-import { StyledDiffCodeView, StyledFileDiff } from "./StyledDiffCodeView";
-import { getDiffColorSchemeClassName } from "~/lib/diffRendering";
+import { StyledDiffCodeView } from "./StyledDiffCodeView";
 
 describe("StyledDiffCodeView", () => {
   beforeEach(() => {
     testState.codeViewClassName = null;
     testState.codeViewOptions = null;
-    testState.fileDiffClassName = null;
-    testState.fileDiffOptions = null;
   });
 
   it("always pairs the shared diff styling with its virtualized geometry", () => {
@@ -70,44 +61,4 @@ describe("StyledDiffCodeView", () => {
       expect.stringContaining(")[data-expand-index]\n  [data-unmodified-lines]"),
     );
   });
-
-  it("maps the alternate palette to blue additions and orange deletions", () => {
-    expect(getDiffColorSchemeClassName("orange-blue")).toBe(
-      "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
-    );
-  });
-
-  it("applies the same appearance defaults to compact file diffs", () => {
-    renderToStaticMarkup(
-      <StyledFileDiff
-        fileDiff={{
-          name: "app.ts",
-          type: "change",
-          hunks: [],
-          splitLineCount: 0,
-          unifiedLineCount: 0,
-          isPartial: true,
-          deletionLines: [],
-          additionLines: [],
-        }}
-        options={{ diffStyle: "unified", theme: "pierre-dark" }}
-      />,
-    );
-
-    expect(testState.fileDiffClassName).toContain("[--t3-diff-addition-color:var(--success)]");
-    expect(testState.fileDiffOptions).toMatchObject({
-      diffStyle: "unified",
-      theme: "pierre-dark",
-      diffIndicators: "bars",
-    });
-    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
-      expect.stringContaining("--diffs-addition-color-override"),
-    );
-    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
-      expect.stringContaining("--diffs-addition-base: var(--diffs-addition-color-override)"),
-    );
-    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
-      expect.stringContaining("--diffs-deletion-base: var(--diffs-deletion-color-override)"),
-    );
-  });
 });
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
index 885270dce8ad..7c4f6304e8b7 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.tsx
@@ -263,13 +263,7 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
 `;
 
 function getDiffSurfaceClassName(colorScheme: DiffColorScheme, className?: string): string {
-  return [
-    "diff-render-surface [--code-background:var(--background)] outline-none",
-    getDiffColorSchemeClassName(colorScheme),
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
+  return `diff-render-surface [--code-background:var(--background)] outline-none ${getDiffColorSchemeClassName(colorScheme)}${className ? ` ${className}` : ""}`;
 }
 
 export type StyledDiffCodeViewOptions<LAnnotation> = Omit<
@@ -298,8 +292,7 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
   unsafeCSSExtra,
   ...props
 }: StyledDiffCodeViewProps<LAnnotation>) {
-  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
-  const diffIndicatorStyle = useClientSettings((settings) => settings.diffIndicatorStyle);
+  const { diffColorScheme, diffIndicatorStyle } = useClientSettings();
 
   return (
     <CodeView<LAnnotation>
@@ -335,23 +328,19 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
   );
 }
 
-export type StyledFileDiffOptions<LAnnotation> = Omit<
-  NonNullable<FileDiffProps<LAnnotation>["options"]>,
-  "unsafeCSS" | "diffIndicators"
->;
-
 type StyledFileDiffProps<LAnnotation> = Omit<FileDiffProps<LAnnotation>, "options"> & {
-  readonly options?: StyledFileDiffOptions<LAnnotation>;
+  readonly options?: Omit<
+    NonNullable<FileDiffProps<LAnnotation>["options"]>,
+    "unsafeCSS" | "diffIndicators"
+  >;
 };
 
-/** The non-virtualized counterpart used for compact inline review-comment diffs. */
 export function StyledFileDiff<LAnnotation = undefined>({
   options,
   className,
   ...props
 }: StyledFileDiffProps<LAnnotation>) {
-  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
-  const diffIndicatorStyle = useClientSettings((settings) => settings.diffIndicatorStyle);
+  const { diffColorScheme, diffIndicatorStyle } = useClientSettings();
 
   return (
     <FileDiff<LAnnotation>
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 97b696af0fc2..adab90e2fb3c 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -78,7 +78,7 @@ import {
 } from "../../providerInstances";
 import { ensureLocalApi, readLocalApi } from "../../localApi";
 import { getDiffColorSchemeClassName } from "../../lib/diffRendering";
-import { cn, isMacPlatform } from "../../lib/utils";
+import { isMacPlatform } from "../../lib/utils";
 import { primaryServerObservabilityAtom, primaryServerProvidersAtom } from "../../state/server";
 import { useProjects } from "../../state/entities";
 import { useArchivedThreadSnapshots } from "../../lib/archivedThreadsState";
@@ -96,6 +96,7 @@ import {
 } from "../ui/dialog";
 import { DraftInput } from "../ui/draft-input";
 import { Input } from "../ui/input";
+import { Toggle } from "../ui/toggle";
 import {
   DEFAULT_CODE_FONT_STACK,
   DEFAULT_SANS_FONT_STACK,
@@ -974,101 +975,38 @@ function BackgroundActivityAdvancedDialog({
   );
 }
 
-function DiffPreviewLine({
-  color,
-  label,
-  marker,
-  showBar,
-}: {
-  readonly color: string;
-  readonly label: string;
-  readonly marker?: "+" | "-";
-  readonly showBar?: boolean;
-}) {
-  return (
-    <span
-      aria-hidden="true"
-      className="relative block h-4 overflow-hidden px-1.5 text-left font-mono text-[10px] leading-4 font-semibold text-foreground"
-      style={
-        {
-          "--diff-preview-color": color,
-          backgroundColor: "color-mix(in srgb, var(--background) 72%, var(--diff-preview-color))",
-        } as CSSProperties
-      }
-    >
-      {showBar ? (
-        <span
-          className="absolute inset-y-0 left-0 w-0.5"
-          style={{ backgroundColor: "var(--diff-preview-color)" }}
-        />
-      ) : null}
-      {marker ? `${marker} ` : ""}
-      {label}
-    </span>
-  );
-}
+const DIFF_PREVIEW_LINES = [
+  { color: "var(--t3-diff-deletion-color)", label: "old", marker: "-" },
+  { color: "var(--t3-diff-addition-color)", label: "new", marker: "+" },
+] as const;
 
-function DiffAppearanceChoice<T extends string>({
-  children,
-  label,
-  onSelect,
-  selected,
-  value,
-}: {
-  readonly children: ReactNode;
-  readonly label: string;
-  readonly onSelect: (value: T) => void;
-  readonly selected: boolean;
-  readonly value: T;
-}) {
-  return (
-    <button
-      aria-label={label}
-      aria-pressed={selected}
-      className={cn(
-        "w-16 cursor-pointer overflow-hidden rounded-lg border-2 bg-background p-1 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
-        selected
-          ? "border-primary ring-1 ring-primary/25"
-          : "border-border/70 hover:border-foreground/30",
-      )}
-      onClick={() => onSelect(value)}
-      type="button"
-    >
-      <span className="block overflow-hidden rounded-sm">{children}</span>
-    </button>
-  );
-}
-
-function DiffColorPreview({ scheme }: { readonly scheme: DiffColorScheme }) {
-  return (
-    <span className={getDiffColorSchemeClassName(scheme)}>
-      <DiffPreviewLine color="var(--t3-diff-deletion-color)" label="old" />
-      <DiffPreviewLine color="var(--t3-diff-addition-color)" label="new" />
-    </span>
-  );
-}
-
-function DiffIndicatorPreview({
+function DiffAppearancePreview({
   colorScheme,
-  style,
+  indicatorStyle,
 }: {
   readonly colorScheme: DiffColorScheme;
-  readonly style: DiffIndicatorStyle;
+  readonly indicatorStyle?: DiffIndicatorStyle;
 }) {
-  const classic = style === "classic";
-
   return (
-    <span className={getDiffColorSchemeClassName(colorScheme)}>
-      <DiffPreviewLine
-        color="var(--t3-diff-deletion-color)"
-        label="old"
-        {...(classic ? { marker: "-" as const } : { showBar: true })}
-      />
-      <DiffPreviewLine
-        color="var(--t3-diff-addition-color)"
-        label="new"
-        {...(classic ? { marker: "+" as const } : { showBar: true })}
-      />
+    <span
+      className={`block overflow-hidden rounded-sm ${getDiffColorSchemeClassName(colorScheme)}`}
+    >
+      {DIFF_PREVIEW_LINES.map(({ color, label, marker }) => (
+        <span
+          aria-hidden
+          className="relative block h-4 px-1.5 text-left font-mono text-[10px] leading-4 font-semibold text-foreground"
+          key={label}
+          style={{
+            backgroundColor: `color-mix(in srgb, var(--background) 72%, ${color})`,
+          }}
+        >
+          {indicatorStyle === "bars" ? (
+            <span className="absolute inset-y-0 left-0 w-0.5" style={{ backgroundColor: color }} />
+          ) : null}
+          {indicatorStyle === "classic" ? `${marker} ` : ""}
+          {label}
+        </span>
+      ))}
     </span>
   );
 }
@@ -1131,21 +1069,22 @@ export function AppearanceSettingsPanel() {
             ) : null
           }
           control={
-            <div aria-label="Diff colors" className="flex items-center gap-2" role="group">
+            <div aria-label="Diff colors" className="flex gap-2" role="group">
               {(["red-green", "orange-blue"] as const).map((scheme) => (
-                <DiffAppearanceChoice
+                <Toggle
                   key={scheme}
-                  label={
+                  aria-label={
                     scheme === "red-green"
                       ? "Red and green diff colors"
                       : "Orange and blue diff colors"
                   }
-                  onSelect={(diffColorScheme) => updateSettings({ diffColorScheme })}
-                  selected={settings.diffColorScheme === scheme}
-                  value={scheme}
+                  pressed={settings.diffColorScheme === scheme}
+                  variant="outline"
+                  className="h-auto w-16 overflow-hidden p-1 data-pressed:border-primary data-pressed:bg-background data-pressed:ring-1 data-pressed:ring-primary/25"
+                  onPressedChange={() => updateSettings({ diffColorScheme: scheme })}
                 >
-                  <DiffColorPreview scheme={scheme} />
-                </DiffAppearanceChoice>
+                  <DiffAppearancePreview colorScheme={scheme} />
+                </Toggle>
               ))}
             </div>
           }
@@ -1167,17 +1106,23 @@ export function AppearanceSettingsPanel() {
             ) : null
           }
           control={
-            <div aria-label="Diff markers" className="flex items-center gap-2" role="group">
+            <div aria-label="Diff markers" className="flex gap-2" role="group">
               {(["bars", "classic"] as const).map((style) => (
-                <DiffAppearanceChoice
+                <Toggle
                   key={style}
-                  label={style === "bars" ? "Bar diff indicators" : "Plus and minus diff markers"}
-                  onSelect={(diffIndicatorStyle) => updateSettings({ diffIndicatorStyle })}
-                  selected={settings.diffIndicatorStyle === style}
-                  value={style}
+                  aria-label={
+                    style === "bars" ? "Bar diff indicators" : "Plus and minus diff markers"
+                  }
+                  pressed={settings.diffIndicatorStyle === style}
+                  variant="outline"
+                  className="h-auto w-16 overflow-hidden p-1 data-pressed:border-primary data-pressed:bg-background data-pressed:ring-1 data-pressed:ring-primary/25"
+                  onPressedChange={() => updateSettings({ diffIndicatorStyle: style })}
                 >
-                  <DiffIndicatorPreview colorScheme={settings.diffColorScheme} style={style} />
-                </DiffAppearanceChoice>
+                  <DiffAppearancePreview
+                    colorScheme={settings.diffColorScheme}
+                    indicatorStyle={style}
+                  />
+                </Toggle>
               ))}
             </div>
           }
diff --git a/apps/web/src/components/settings/settingsSearch.test.ts b/apps/web/src/components/settings/settingsSearch.test.ts
index 2d04b47ad642..09fd7a9a6a0b 100644
--- a/apps/web/src/components/settings/settingsSearch.test.ts
+++ b/apps/web/src/components/settings/settingsSearch.test.ts
@@ -84,14 +84,6 @@ describe("searchSettings", () => {
       id: "word-wrap",
       to: "/settings/appearance",
     });
-    expect(searchSettings("diff colors")[0]).toMatchObject({
-      id: "diff-colors",
-      to: "/settings/appearance",
-    });
-    expect(searchSettings("diff markers")[0]).toMatchObject({
-      id: "diff-markers",
-      to: "/settings/appearance",
-    });
     expect(searchSettings("environment identification")[0]).toMatchObject({
       id: "environment-identification",
       to: "/settings/appearance",
diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts
index 2d910f89ce12..605e607332dd 100644
--- a/apps/web/src/lib/diffRendering.ts
+++ b/apps/web/src/lib/diffRendering.ts
@@ -2,14 +2,10 @@ import { parsePatchFiles } from "@pierre/diffs/utils/parsePatchFiles";
 import type { FileDiffMetadata } from "@pierre/diffs/types";
 import type { DiffColorScheme } from "@t3tools/contracts/settings";
 
-const DIFF_COLOR_SCHEME_CLASSES: Record<DiffColorScheme, string> = {
-  "red-green":
-    "[--t3-diff-addition-color:var(--success)] [--t3-diff-deletion-color:var(--destructive)]",
-  "orange-blue": "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
-};
-
 export function getDiffColorSchemeClassName(scheme: DiffColorScheme): string {
-  return DIFF_COLOR_SCHEME_CLASSES[scheme];
+  return scheme === "orange-blue"
+    ? "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]"
+    : "[--t3-diff-addition-color:var(--success)] [--t3-diff-deletion-color:var(--destructive)]";
 }
 
 export const DIFF_THEME_NAMES = {
diff --git a/docs/README.md b/docs/README.md
index b8d53af6aae0..2a69d1045cba 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,7 +8,7 @@
 - [Organizing threads](./user/thread-sidebar.md)
 - [Review usage](./user/usage.md)
 - [Customize a project icon](./user/project-settings.md)
-- [Web and desktop appearance](./user/appearance.md)
+- [Diff appearance](./user/appearance.md)
 - [Mobile appearance](./user/mobile-appearance.md)
 - [Remote access](./user/remote-access.md)
 - [Keeping app and server in sync](./user/updating.md)
diff --git a/docs/user/appearance.md b/docs/user/appearance.md
index 427b7cc81085..662383e76474 100644
--- a/docs/user/appearance.md
+++ b/docs/user/appearance.md
@@ -1,15 +1,9 @@
-# Web and desktop appearance
+# Diff appearance
 
-Open **Settings** → **Appearance** to choose the theme, interface transparency, fonts, and code
-display preferences used by the web and desktop apps.
-
-## Diff appearance
-
-**Diff colors** switches between the standard red/green palette and an orange/blue palette. The
-selected colors apply to added and deleted rows, line-number gutters, and diff headers.
+Open **Settings** → **Appearance** in the web or desktop app. **Diff colors** switches between
+the standard red/green palette and an orange/blue palette.
 
 **Diff markers** switches between compact bar indicators and classic `+` and `−` markers at the
 start of changed lines.
 
-These preferences are stored on the current device and apply to the main diff panel, pull request
-reviews, and inline review-comment diffs.
+Both preferences apply to diff panels and pull request reviews on the current device.
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index 29f5987e5b4d..7c87a48aa9f2 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -16,9 +16,13 @@ const decodeServerSettings = Schema.decodeUnknownSync(ServerSettings);
 const decodeServerSettingsPatch = Schema.decodeUnknownSync(ServerSettingsPatch);
 const encodeServerSettings = Schema.encodeSync(ServerSettings);
 
-describe("ClientSettings word wrap", () => {
-  it("defaults word wrap on", () => {
-    expect(decodeClientSettings({}).wordWrap).toBe(true);
+describe("ClientSettings display defaults", () => {
+  it("preserves existing display behavior", () => {
+    const settings = decodeClientSettings({});
+
+    expect(settings.wordWrap).toBe(true);
+    expect(settings.diffColorScheme).toBe("red-green");
+    expect(settings.diffIndicatorStyle).toBe("bars");
   });
 
   it("ignores obsolete wrapping preferences", () => {
@@ -33,32 +37,6 @@ describe("ClientSettings word wrap", () => {
   });
 });
 
-describe("ClientSettings diff appearance", () => {
-  it("preserves the existing colors and bar indicators by default", () => {
-    const settings = decodeClientSettings({});
-
-    expect(settings.diffColorScheme).toBe("red-green");
-    expect(settings.diffIndicatorStyle).toBe("bars");
-  });
-
-  it("accepts the alternate colors and classic line markers", () => {
-    expect(
-      decodeClientSettingsPatch({
-        diffColorScheme: "orange-blue",
-        diffIndicatorStyle: "classic",
-      }),
-    ).toMatchObject({
-      diffColorScheme: "orange-blue",
-      diffIndicatorStyle: "classic",
-    });
-  });
-
-  it("rejects unsupported diff appearance values", () => {
-    expect(() => decodeClientSettings({ diffColorScheme: "purple-yellow" })).toThrow();
-    expect(() => decodeClientSettingsPatch({ diffIndicatorStyle: "none" })).toThrow();
-  });
-});
-
 describe("ClientSettings glass opacity", () => {
   it("defaults to a readable translucent surface", () => {
     expect(decodeClientSettings({}).glassOpacity).toBe(80);
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 881c9f95575b..7753c3a2bb0d 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -114,11 +114,9 @@ export const DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE: EnvironmentIdentificationM
 
 export const DiffColorScheme = Schema.Literals(["red-green", "orange-blue"]);
 export type DiffColorScheme = typeof DiffColorScheme.Type;
-export const DEFAULT_DIFF_COLOR_SCHEME: DiffColorScheme = "red-green";
 
 export const DiffIndicatorStyle = Schema.Literals(["bars", "classic"]);
 export type DiffIndicatorStyle = typeof DiffIndicatorStyle.Type;
-export const DEFAULT_DIFF_INDICATOR_STYLE: DiffIndicatorStyle = "bars";
 
 /**
  * A user-chosen font family (a single name or a comma-separated list). Empty
@@ -163,12 +161,8 @@ export const ClientSettingsSchema = Schema.Struct({
   dismissedProviderUpdateNotificationKeys: Schema.Array(TrimmedNonEmptyString).pipe(
     Schema.withDecodingDefault(Effect.succeed([])),
   ),
-  diffColorScheme: DiffColorScheme.pipe(
-    Schema.withDecodingDefault(Effect.succeed(DEFAULT_DIFF_COLOR_SCHEME)),
-  ),
-  diffIndicatorStyle: DiffIndicatorStyle.pipe(
-    Schema.withDecodingDefault(Effect.succeed(DEFAULT_DIFF_INDICATOR_STYLE)),
-  ),
+  diffColorScheme: DiffColorScheme.pipe(Schema.withDecodingDefault(Effect.succeed("red-green"))),
+  diffIndicatorStyle: DiffIndicatorStyle.pipe(Schema.withDecodingDefault(Effect.succeed("bars"))),
   diffIgnoreWhitespace: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
   environmentIdentificationMode: EnvironmentIdentificationMode.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE)),

From 413b495442fe432ebd614d7900fa690946422071 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 18:07:36 -0700
Subject: [PATCH 06/13] fix(web): preserve diff toggle interaction

---
 apps/web/src/components/settings/SettingsPanels.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index adab90e2fb3c..1c606afad785 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1080,7 +1080,7 @@ export function AppearanceSettingsPanel() {
                   }
                   pressed={settings.diffColorScheme === scheme}
                   variant="outline"
-                  className="h-auto w-16 overflow-hidden p-1 data-pressed:border-primary data-pressed:bg-background data-pressed:ring-1 data-pressed:ring-primary/25"
+                  className="h-auto w-16 p-1 data-pressed:border-primary"
                   onPressedChange={() => updateSettings({ diffColorScheme: scheme })}
                 >
                   <DiffAppearancePreview colorScheme={scheme} />
@@ -1115,7 +1115,7 @@ export function AppearanceSettingsPanel() {
                   }
                   pressed={settings.diffIndicatorStyle === style}
                   variant="outline"
-                  className="h-auto w-16 overflow-hidden p-1 data-pressed:border-primary data-pressed:bg-background data-pressed:ring-1 data-pressed:ring-primary/25"
+                  className="h-auto w-16 p-1 data-pressed:border-primary"
                   onPressedChange={() => updateSettings({ diffIndicatorStyle: style })}
                 >
                   <DiffAppearancePreview

From af66c027edbf290981153c90c641582feccf2ad9 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 21:06:46 -0700
Subject: [PATCH 07/13] refactor(web): reuse diff preview in appearance
 settings

---
 .../settings/SettingsFontPreviews.tsx         |  68 +++++----
 .../components/settings/SettingsPanels.tsx    | 131 +++++++-----------
 2 files changed, 84 insertions(+), 115 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsFontPreviews.tsx b/apps/web/src/components/settings/SettingsFontPreviews.tsx
index a678c2ad5540..8b03ad0b7b79 100644
--- a/apps/web/src/components/settings/SettingsFontPreviews.tsx
+++ b/apps/web/src/components/settings/SettingsFontPreviews.tsx
@@ -3,7 +3,14 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "../ComposerPromptEditor";
 import { terminalThemeFromApp } from "../ThreadTerminalDrawer";
 import { useTheme } from "../../hooks/useTheme";
-import { resolveDiffThemeName, type DiffThemeName } from "../../lib/diffRendering";
+import { useClientSettings } from "../../hooks/useSettings";
+import {
+  DIFF_SURFACE_THEME_UNSAFE_CSS,
+  getDiffColorSchemeClassName,
+  resolveDiffThemeName,
+  type DiffThemeName,
+} from "../../lib/diffRendering";
+import type { DiffIndicatorStyle } from "@t3tools/contracts/settings";
 import { GhosttyTerminalSurface } from "~/terminal/ghostty/surface";
 
 // The font previews are the real surfaces, not lookalikes: the composer's
@@ -71,73 +78,64 @@ const DIFF_PREVIEW_PATCH = [
 // (toggling Advanced) and lock in an unhighlighted frame; a static preview
 // needs none of that lifecycle, so it uses the deterministic renderer and
 // injects the finished HTML into a shadow root, exactly as FileDiff would.
-const diffPreviewHtmlByTheme = new Map<DiffThemeName, Promise<readonly string[]>>();
+const diffPreviewHtml = new Map<string, Promise<readonly string[]>>();
 
-function loadDiffPreviewHtml(theme: DiffThemeName): Promise<readonly string[]> {
-  let promise = diffPreviewHtmlByTheme.get(theme);
+function loadDiffPreviewHtml(
+  theme: DiffThemeName,
+  diffIndicators: DiffIndicatorStyle,
+): Promise<readonly string[]> {
+  const key = `${theme}:${diffIndicators}`;
+  let promise = diffPreviewHtml.get(key);
   if (promise === undefined) {
     promise = preloadPatchFile({
       patch: DIFF_PREVIEW_PATCH,
-      options: { diffStyle: "unified", theme },
+      options: {
+        diffIndicators,
+        diffStyle: "unified",
+        theme,
+        unsafeCSS: DIFF_SURFACE_THEME_UNSAFE_CSS,
+      },
     }).then((results) => results.map((result) => result.prerenderedHTML));
-    diffPreviewHtmlByTheme.set(theme, promise);
+    diffPreviewHtml.set(key, promise);
   }
   return promise;
 }
 
-// Pierre's prerendered stylesheet bakes its own light/dark surface colors
-// into the shadow root's @layer rules. These unlayered rules win the cascade
-// without !important and re-point the surfaces at the app's code tokens
-// (custom properties inherit across the shadow boundary), so the preview
-// follows the active theme exactly like the real diff panel does.
-const DIFF_PREVIEW_THEME_BRIDGE = `
-  :host {
-    color: var(--code-foreground);
-    background-color: var(--code-background);
-    --diffs-fg: var(--code-foreground);
-    --diffs-bg: var(--code-background);
-    --diffs-light-bg: var(--code-background);
-    --diffs-dark-bg: var(--code-background);
-  }
-  [data-diffs-header] {
-    background-color: var(--code-background);
-    color: var(--code-foreground);
-  }
-`;
-
-function StaticDiffHtml({ html }: { html: string }) {
+function StaticDiffHtml({ html, className }: { html: string; className: string }) {
   const hostRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     const host = hostRef.current;
     if (host === null) return;
     const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
     shadow.innerHTML = html;
-    const bridge = document.createElement("style");
-    bridge.textContent = DIFF_PREVIEW_THEME_BRIDGE;
-    shadow.append(bridge);
   }, [html]);
-  return <div ref={hostRef} />;
+  return <div className={className} ref={hostRef} />;
 }
 
 /** The diff panel's file diff, statically rendered by its real pipeline. */
-export function CodeFontPreview() {
+export function DiffPreview() {
   const { resolvedTheme } = useTheme();
+  const { diffColorScheme, diffIndicatorStyle } = useClientSettings();
   const themeName = resolveDiffThemeName(resolvedTheme);
   const [htmlByFile, setHtmlByFile] = useState<readonly string[] | null>(null);
   useEffect(() => {
     let cancelled = false;
-    void loadDiffPreviewHtml(themeName).then((html) => {
+    void loadDiffPreviewHtml(themeName, diffIndicatorStyle).then((html) => {
       if (!cancelled) setHtmlByFile(html);
     });
     return () => {
       cancelled = true;
     };
-  }, [themeName]);
+  }, [diffIndicatorStyle, themeName]);
   if (htmlByFile === null) return null;
   return (
     <div className="mt-1 mb-2 space-y-2">
       {htmlByFile.map((html) => (
-        <StaticDiffHtml key={html} html={html} />
+        <StaticDiffHtml
+          className={`[--code-background:var(--background)] ${getDiffColorSchemeClassName(diffColorScheme)}`}
+          key={html}
+          html={html}
+        />
       ))}
     </div>
   );
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 1c606afad785..3de87973005b 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -19,8 +19,6 @@ import {
 import {
   DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE,
   DEFAULT_UNIFIED_SETTINGS,
-  type DiffColorScheme,
-  type DiffIndicatorStyle,
   type EnvironmentIdentificationMode,
   MAX_CODE_FONT_SIZE,
   MAX_GLASS_OPACITY,
@@ -77,7 +75,6 @@ import {
   sortProviderInstanceEntries,
 } from "../../providerInstances";
 import { ensureLocalApi, readLocalApi } from "../../localApi";
-import { getDiffColorSchemeClassName } from "../../lib/diffRendering";
 import { isMacPlatform } from "../../lib/utils";
 import { primaryServerObservabilityAtom, primaryServerProvidersAtom } from "../../state/server";
 import { useProjects } from "../../state/entities";
@@ -96,7 +93,6 @@ import {
 } from "../ui/dialog";
 import { DraftInput } from "../ui/draft-input";
 import { Input } from "../ui/input";
-import { Toggle } from "../ui/toggle";
 import {
   DEFAULT_CODE_FONT_STACK,
   DEFAULT_SANS_FONT_STACK,
@@ -107,7 +103,7 @@ import {
   resolveTerminalFontSizePreference,
   TYPOGRAPHY_ADVANCED_STORAGE_KEY,
 } from "../../appearanceFonts";
-import { CodeFontPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
+import { DiffPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
 import { discoverInstalledFonts, FontFamilyPicker, useFontEnumeration } from "./FontFamilyPicker";
 import {
   NumberField,
@@ -975,42 +971,6 @@ function BackgroundActivityAdvancedDialog({
   );
 }
 
-const DIFF_PREVIEW_LINES = [
-  { color: "var(--t3-diff-deletion-color)", label: "old", marker: "-" },
-  { color: "var(--t3-diff-addition-color)", label: "new", marker: "+" },
-] as const;
-
-function DiffAppearancePreview({
-  colorScheme,
-  indicatorStyle,
-}: {
-  readonly colorScheme: DiffColorScheme;
-  readonly indicatorStyle?: DiffIndicatorStyle;
-}) {
-  return (
-    <span
-      className={`block overflow-hidden rounded-sm ${getDiffColorSchemeClassName(colorScheme)}`}
-    >
-      {DIFF_PREVIEW_LINES.map(({ color, label, marker }) => (
-        <span
-          aria-hidden
-          className="relative block h-4 px-1.5 text-left font-mono text-[10px] leading-4 font-semibold text-foreground"
-          key={label}
-          style={{
-            backgroundColor: `color-mix(in srgb, var(--background) 72%, ${color})`,
-          }}
-        >
-          {indicatorStyle === "bars" ? (
-            <span className="absolute inset-y-0 left-0 w-0.5" style={{ backgroundColor: color }} />
-          ) : null}
-          {indicatorStyle === "classic" ? `${marker} ` : ""}
-          {label}
-        </span>
-      ))}
-    </span>
-  );
-}
-
 export function AppearanceSettingsPanel() {
   const {
     appearanceMode,
@@ -1069,24 +1029,28 @@ export function AppearanceSettingsPanel() {
             ) : null
           }
           control={
-            <div aria-label="Diff colors" className="flex gap-2" role="group">
-              {(["red-green", "orange-blue"] as const).map((scheme) => (
-                <Toggle
-                  key={scheme}
-                  aria-label={
-                    scheme === "red-green"
-                      ? "Red and green diff colors"
-                      : "Orange and blue diff colors"
-                  }
-                  pressed={settings.diffColorScheme === scheme}
-                  variant="outline"
-                  className="h-auto w-16 p-1 data-pressed:border-primary"
-                  onPressedChange={() => updateSettings({ diffColorScheme: scheme })}
-                >
-                  <DiffAppearancePreview colorScheme={scheme} />
-                </Toggle>
-              ))}
-            </div>
+            <Select
+              value={settings.diffColorScheme}
+              onValueChange={(diffColorScheme) => {
+                if (diffColorScheme === "red-green" || diffColorScheme === "orange-blue") {
+                  updateSettings({ diffColorScheme });
+                }
+              }}
+            >
+              <SelectTrigger className="w-40" aria-label="Diff colors">
+                <SelectValue>
+                  {settings.diffColorScheme === "red-green" ? "Red and green" : "Orange and blue"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectPopup align="end" alignItemWithTrigger={false}>
+                <SelectItem hideIndicator value="red-green">
+                  Red and green
+                </SelectItem>
+                <SelectItem hideIndicator value="orange-blue">
+                  Orange and blue
+                </SelectItem>
+              </SelectPopup>
+            </Select>
           }
         />
 
@@ -1106,28 +1070,35 @@ export function AppearanceSettingsPanel() {
             ) : null
           }
           control={
-            <div aria-label="Diff markers" className="flex gap-2" role="group">
-              {(["bars", "classic"] as const).map((style) => (
-                <Toggle
-                  key={style}
-                  aria-label={
-                    style === "bars" ? "Bar diff indicators" : "Plus and minus diff markers"
-                  }
-                  pressed={settings.diffIndicatorStyle === style}
-                  variant="outline"
-                  className="h-auto w-16 p-1 data-pressed:border-primary"
-                  onPressedChange={() => updateSettings({ diffIndicatorStyle: style })}
-                >
-                  <DiffAppearancePreview
-                    colorScheme={settings.diffColorScheme}
-                    indicatorStyle={style}
-                  />
-                </Toggle>
-              ))}
-            </div>
+            <Select
+              value={settings.diffIndicatorStyle}
+              onValueChange={(diffIndicatorStyle) => {
+                if (diffIndicatorStyle === "bars" || diffIndicatorStyle === "classic") {
+                  updateSettings({ diffIndicatorStyle });
+                }
+              }}
+            >
+              <SelectTrigger className="w-40" aria-label="Diff markers">
+                <SelectValue>
+                  {settings.diffIndicatorStyle === "bars" ? "Bars" : "Plus and minus"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectPopup align="end" alignItemWithTrigger={false}>
+                <SelectItem hideIndicator value="bars">
+                  Bars
+                </SelectItem>
+                <SelectItem hideIndicator value="classic">
+                  Plus and minus
+                </SelectItem>
+              </SelectPopup>
+            </Select>
           }
         />
 
+        <div className="px-3 sm:px-4">
+          <DiffPreview />
+        </div>
+
         <SettingsRow
           {...searchableSetting("setting-glass-opacity")}
           description="Control how transparent glass surfaces are. Higher values make menus, dialogs, and the composer more solid."
@@ -1340,7 +1311,7 @@ function CodeFontRow({
         defaultValue: DEFAULT_UNIFIED_SETTINGS.fontSizeCode,
         onChange: (fontSizeCode) => updateSettings({ fontSizeCode }),
       }}
-      preview={preview ?? <CodeFontPreview />}
+      preview={preview ?? <DiffPreview />}
     />
   );
 }
@@ -1468,7 +1439,7 @@ function SimpleFontRows() {
         description="Code blocks, diffs, file previews, and the terminal."
         preview={
           <>
-            <CodeFontPreview />
+            <DiffPreview />
             <TerminalFontPreview
               family={resolveTerminalFontPreference({
                 advanced: false,

From ecd0ba5627f58f0c96937e106db3197c63772312 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Mon, 17 Aug 2026 21:12:55 -0700
Subject: [PATCH 08/13] fix(web): align diff appearance controls

---
 apps/web/src/components/settings/SettingsPanels.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 3de87973005b..c8e7440b5c8a 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1037,7 +1037,7 @@ export function AppearanceSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger className="w-40" aria-label="Diff colors">
+              <SelectTrigger className="w-full sm:w-40" aria-label="Diff colors">
                 <SelectValue>
                   {settings.diffColorScheme === "red-green" ? "Red and green" : "Orange and blue"}
                 </SelectValue>
@@ -1078,7 +1078,7 @@ export function AppearanceSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger className="w-40" aria-label="Diff markers">
+              <SelectTrigger className="w-full sm:w-40" aria-label="Diff markers">
                 <SelectValue>
                   {settings.diffIndicatorStyle === "bars" ? "Bars" : "Plus and minus"}
                 </SelectValue>
@@ -1093,11 +1093,9 @@ export function AppearanceSettingsPanel() {
               </SelectPopup>
             </Select>
           }
-        />
-
-        <div className="px-3 sm:px-4">
+        >
           <DiffPreview />
-        </div>
+        </SettingsRow>
 
         <SettingsRow
           {...searchableSetting("setting-glass-opacity")}

From 13f3b9f93165ff3d9bf526d2eb993e4a0a669ca1 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Tue, 18 Aug 2026 11:01:27 -0700
Subject: [PATCH 09/13] fix(web): move diff settings into typography

---
 .../components/settings/SettingsPanels.tsx    | 207 +++++++++---------
 1 file changed, 107 insertions(+), 100 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index c8e7440b5c8a..102900e0aa89 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1015,88 +1015,6 @@ export function AppearanceSettingsPanel() {
           />
         </div>
 
-        <SettingsRow
-          {...searchableSetting("diff-colors")}
-          description="Choose the colors marking added and deleted lines in diffs."
-          resetAction={
-            settings.diffColorScheme !== DEFAULT_UNIFIED_SETTINGS.diffColorScheme ? (
-              <SettingResetButton
-                label="diff colors"
-                onClick={() =>
-                  updateSettings({ diffColorScheme: DEFAULT_UNIFIED_SETTINGS.diffColorScheme })
-                }
-              />
-            ) : null
-          }
-          control={
-            <Select
-              value={settings.diffColorScheme}
-              onValueChange={(diffColorScheme) => {
-                if (diffColorScheme === "red-green" || diffColorScheme === "orange-blue") {
-                  updateSettings({ diffColorScheme });
-                }
-              }}
-            >
-              <SelectTrigger className="w-full sm:w-40" aria-label="Diff colors">
-                <SelectValue>
-                  {settings.diffColorScheme === "red-green" ? "Red and green" : "Orange and blue"}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectPopup align="end" alignItemWithTrigger={false}>
-                <SelectItem hideIndicator value="red-green">
-                  Red and green
-                </SelectItem>
-                <SelectItem hideIndicator value="orange-blue">
-                  Orange and blue
-                </SelectItem>
-              </SelectPopup>
-            </Select>
-          }
-        />
-
-        <SettingsRow
-          {...searchableSetting("diff-markers")}
-          description="Show + and − markers on added and deleted diff lines."
-          resetAction={
-            settings.diffIndicatorStyle !== DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle ? (
-              <SettingResetButton
-                label="diff markers"
-                onClick={() =>
-                  updateSettings({
-                    diffIndicatorStyle: DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle,
-                  })
-                }
-              />
-            ) : null
-          }
-          control={
-            <Select
-              value={settings.diffIndicatorStyle}
-              onValueChange={(diffIndicatorStyle) => {
-                if (diffIndicatorStyle === "bars" || diffIndicatorStyle === "classic") {
-                  updateSettings({ diffIndicatorStyle });
-                }
-              }}
-            >
-              <SelectTrigger className="w-full sm:w-40" aria-label="Diff markers">
-                <SelectValue>
-                  {settings.diffIndicatorStyle === "bars" ? "Bars" : "Plus and minus"}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectPopup align="end" alignItemWithTrigger={false}>
-                <SelectItem hideIndicator value="bars">
-                  Bars
-                </SelectItem>
-                <SelectItem hideIndicator value="classic">
-                  Plus and minus
-                </SelectItem>
-              </SelectPopup>
-            </Select>
-          }
-        >
-          <DiffPreview />
-        </SettingsRow>
-
         <SettingsRow
           {...searchableSetting("setting-glass-opacity")}
           description="Control how transparent glass surfaces are. Higher values make menus, dialogs, and the composer more solid."
@@ -1309,7 +1227,7 @@ function CodeFontRow({
         defaultValue: DEFAULT_UNIFIED_SETTINGS.fontSizeCode,
         onChange: (fontSizeCode) => updateSettings({ fontSizeCode }),
       }}
-      preview={preview ?? <DiffPreview />}
+      {...(preview !== undefined ? { preview } : {})}
     />
   );
 }
@@ -1410,12 +1328,104 @@ function WordWrapRow() {
   );
 }
 
+function DiffAppearanceRows({ children }: { children?: ReactNode }) {
+  const settings = usePrimarySettings();
+  const updateSettings = useUpdatePrimarySettings();
+  return (
+    <>
+      <SettingsRow
+        {...searchableSetting("diff-colors")}
+        description="Choose the colors marking added and deleted lines in diffs."
+        resetAction={
+          settings.diffColorScheme !== DEFAULT_UNIFIED_SETTINGS.diffColorScheme ? (
+            <SettingResetButton
+              label="diff colors"
+              onClick={() =>
+                updateSettings({ diffColorScheme: DEFAULT_UNIFIED_SETTINGS.diffColorScheme })
+              }
+            />
+          ) : null
+        }
+        control={
+          <Select
+            value={settings.diffColorScheme}
+            onValueChange={(diffColorScheme) => {
+              if (diffColorScheme === "red-green" || diffColorScheme === "orange-blue") {
+                updateSettings({ diffColorScheme });
+              }
+            }}
+          >
+            <SelectTrigger className="w-full sm:w-40" aria-label="Diff colors">
+              <SelectValue>
+                {settings.diffColorScheme === "red-green" ? "Red and green" : "Orange and blue"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectPopup align="end" alignItemWithTrigger={false}>
+              <SelectItem hideIndicator value="red-green">
+                Red and green
+              </SelectItem>
+              <SelectItem hideIndicator value="orange-blue">
+                Orange and blue
+              </SelectItem>
+            </SelectPopup>
+          </Select>
+        }
+      />
+
+      <SettingsRow
+        {...searchableSetting("diff-markers")}
+        description="Show + and − markers on added and deleted diff lines."
+        resetAction={
+          settings.diffIndicatorStyle !== DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle ? (
+            <SettingResetButton
+              label="diff markers"
+              onClick={() =>
+                updateSettings({
+                  diffIndicatorStyle: DEFAULT_UNIFIED_SETTINGS.diffIndicatorStyle,
+                })
+              }
+            />
+          ) : null
+        }
+        control={
+          <Select
+            value={settings.diffIndicatorStyle}
+            onValueChange={(diffIndicatorStyle) => {
+              if (diffIndicatorStyle === "bars" || diffIndicatorStyle === "classic") {
+                updateSettings({ diffIndicatorStyle });
+              }
+            }}
+          >
+            <SelectTrigger className="w-full sm:w-40" aria-label="Diff markers">
+              <SelectValue>
+                {settings.diffIndicatorStyle === "bars" ? "Bars" : "Plus and minus"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectPopup align="end" alignItemWithTrigger={false}>
+              <SelectItem hideIndicator value="bars">
+                Bars
+              </SelectItem>
+              <SelectItem hideIndicator value="classic">
+                Plus and minus
+              </SelectItem>
+            </SelectPopup>
+          </Select>
+        }
+      >
+        <DiffPreview />
+        {children}
+      </SettingsRow>
+    </>
+  );
+}
+
 function FontSettingsGroup() {
   return (
     <>
       <InterfaceFontRow />
       <PromptFontRow />
       <CodeFontRow />
+      <DiffAppearanceRows />
       <TerminalFontRow />
       <FontSmoothingRow />
     </>
@@ -1435,24 +1445,21 @@ function SimpleFontRows() {
       <CodeFontRow
         title="Monospace font"
         description="Code blocks, diffs, file previews, and the terminal."
-        preview={
-          <>
-            <DiffPreview />
-            <TerminalFontPreview
-              family={resolveTerminalFontPreference({
-                advanced: false,
-                code: settings.fontFamilyCode,
-                terminal: settings.fontFamilyTerminal,
-              })}
-              size={resolveTerminalFontSizePreference({
-                advanced: false,
-                code: settings.fontSizeCode,
-                terminal: settings.fontSizeTerminal,
-              })}
-            />
-          </>
-        }
       />
+      <DiffAppearanceRows>
+        <TerminalFontPreview
+          family={resolveTerminalFontPreference({
+            advanced: false,
+            code: settings.fontFamilyCode,
+            terminal: settings.fontFamilyTerminal,
+          })}
+          size={resolveTerminalFontSizePreference({
+            advanced: false,
+            code: settings.fontSizeCode,
+            terminal: settings.fontSizeTerminal,
+          })}
+        />
+      </DiffAppearanceRows>
     </>
   );
 }

From 53d69032e25e695499fc086e1d6257138a86875c Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Tue, 18 Aug 2026 11:13:31 -0700
Subject: [PATCH 10/13] fix(web): keep terminal preview with monospace setting

---
 .../components/settings/SettingsPanels.tsx    | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 102900e0aa89..80da7848dc88 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1445,21 +1445,22 @@ function SimpleFontRows() {
       <CodeFontRow
         title="Monospace font"
         description="Code blocks, diffs, file previews, and the terminal."
+        preview={
+          <TerminalFontPreview
+            family={resolveTerminalFontPreference({
+              advanced: false,
+              code: settings.fontFamilyCode,
+              terminal: settings.fontFamilyTerminal,
+            })}
+            size={resolveTerminalFontSizePreference({
+              advanced: false,
+              code: settings.fontSizeCode,
+              terminal: settings.fontSizeTerminal,
+            })}
+          />
+        }
       />
-      <DiffAppearanceRows>
-        <TerminalFontPreview
-          family={resolveTerminalFontPreference({
-            advanced: false,
-            code: settings.fontFamilyCode,
-            terminal: settings.fontFamilyTerminal,
-          })}
-          size={resolveTerminalFontSizePreference({
-            advanced: false,
-            code: settings.fontSizeCode,
-            terminal: settings.fontSizeTerminal,
-          })}
-        />
-      </DiffAppearanceRows>
+      <DiffAppearanceRows />
     </>
   );
 }

From bc594cca99f31252d988f143c5508e4915d04a92 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Tue, 18 Aug 2026 11:29:27 -0700
Subject: [PATCH 11/13] fix(web): apply diff palette to change counts

---
 apps/web/src/components/DiffPanel.tsx         |  6 ++-
 .../src/components/chat/ChangedFilesTree.tsx  |  8 +++-
 .../web/src/components/chat/DiffStatLabel.tsx | 10 ++++-
 .../diffs/StyledDiffCodeView.test.tsx         | 38 ++++++++++++++++++-
 4 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 53de0fdb8dd2..61f8b0904a56 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -31,6 +31,7 @@ import { selectThreadDiffPanelSelection, useDiffPanelStore } from "../diffPanelS
 import { useTheme } from "../hooks/useTheme";
 import {
   buildFileDiffRenderKey,
+  getDiffColorSchemeClassName,
   getDiffCollapseIconClassName,
   getDiffLineStat,
   getRenderablePatch,
@@ -715,7 +716,10 @@ export default function DiffPanel({
           <DiffStatLabel
             additions={diffLineStat.additions}
             deletions={diffLineStat.deletions}
-            className="mr-1 text-[11px]"
+            className={cn(
+              "mr-1 text-[11px]",
+              getDiffColorSchemeClassName(settings.diffColorScheme),
+            )}
             layout="inline"
           />
         )}
diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
index 1212030ba339..b763169cbac2 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -15,6 +15,8 @@ import {
   FolderClosedIcon,
 } from "lucide-react";
 import { cn } from "~/lib/utils";
+import { useClientSettings } from "~/hooks/useSettings";
+import { getDiffColorSchemeClassName } from "~/lib/diffRendering";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
 import { PierreEntryIcon } from "./PierreEntryIcon";
 import { Button } from "../ui/button";
@@ -53,10 +55,14 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
   const scopeSummary = useMemo(() => summarizeChangedFileScopes(files), [files]);
   const previewFiles = useMemo(() => selectChangedFilePreview(files), [files]);
   const compactPreviewVisible = showCompactPreview && !expanded;
+  const { diffColorScheme } = useClientSettings();
 
   return (
     <div
-      className="@container/changed-files mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32"
+      className={cn(
+        "@container/changed-files mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32",
+        getDiffColorSchemeClassName(diffColorScheme),
+      )}
       data-changed-files-state={
         expanded ? "expanded" : compactPreviewVisible ? "preview" : "collapsed"
       }
diff --git a/apps/web/src/components/chat/DiffStatLabel.tsx b/apps/web/src/components/chat/DiffStatLabel.tsx
index 6787a8df1963..9ff7736d32a4 100644
--- a/apps/web/src/components/chat/DiffStatLabel.tsx
+++ b/apps/web/src/components/chat/DiffStatLabel.tsx
@@ -40,10 +40,16 @@ export const DiffStatLabel = memo(function DiffStatLabel(props: {
           className,
         )}
       >
-        <span aria-hidden="true" className="font-mono text-success">
+        <span
+          aria-hidden="true"
+          className="font-mono text-[var(--t3-diff-addition-color,var(--success))]"
+        >
           +{formatCompactDiffCount(additions)}
         </span>
-        <span aria-hidden="true" className="font-mono text-destructive">
+        <span
+          aria-hidden="true"
+          className="font-mono text-[var(--t3-diff-deletion-color,var(--destructive))]"
+        >
           -{formatCompactDiffCount(deletions)}
         </span>
       </span>
diff --git a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
index cccfe7a96854..2ca54a8714fd 100644
--- a/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
+++ b/apps/web/src/components/diffs/StyledDiffCodeView.test.tsx
@@ -1,9 +1,12 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import type { FileDiffMetadata } from "@pierre/diffs";
 
 const testState = vi.hoisted(() => ({
   codeViewClassName: null as string | null,
   codeViewOptions: null as Record<string, unknown> | null,
+  fileDiffClassName: null as string | null,
+  fileDiffOptions: null as Record<string, unknown> | null,
 }));
 
 vi.mock("@pierre/diffs/react", () => ({
@@ -12,15 +15,21 @@ vi.mock("@pierre/diffs/react", () => ({
     testState.codeViewOptions = props.options;
     return null;
   },
-  FileDiff: () => null,
+  FileDiff: (props: { className: string; options: Record<string, unknown> }) => {
+    testState.fileDiffClassName = props.className;
+    testState.fileDiffOptions = props.options;
+    return null;
+  },
 }));
 
-import { StyledDiffCodeView } from "./StyledDiffCodeView";
+import { StyledDiffCodeView, StyledFileDiff } from "./StyledDiffCodeView";
 
 describe("StyledDiffCodeView", () => {
   beforeEach(() => {
     testState.codeViewClassName = null;
     testState.codeViewOptions = null;
+    testState.fileDiffClassName = null;
+    testState.fileDiffOptions = null;
   });
 
   it("always pairs the shared diff styling with its virtualized geometry", () => {
@@ -61,4 +70,29 @@ describe("StyledDiffCodeView", () => {
       expect.stringContaining(")[data-expand-index]\n  [data-unmodified-lines]"),
     );
   });
+
+  it("applies the shared appearance to standalone file diffs", () => {
+    const fileDiff = { name: "src/app.ts", hunks: [] } as unknown as FileDiffMetadata;
+    renderToStaticMarkup(
+      <StyledFileDiff
+        className="rounded-md"
+        fileDiff={fileDiff}
+        options={{ collapsed: false, theme: "pierre-dark" }}
+      />,
+    );
+
+    expect(testState.fileDiffClassName).toBe(
+      "diff-render-surface [--code-background:var(--background)] outline-none " +
+        "[--t3-diff-addition-color:var(--success)] " +
+        "[--t3-diff-deletion-color:var(--destructive)] rounded-md",
+    );
+    expect(testState.fileDiffOptions).toMatchObject({
+      collapsed: false,
+      theme: "pierre-dark",
+      diffIndicators: "bars",
+    });
+    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
+      expect.stringContaining("--diffs-addition-base"),
+    );
+  });
 });

From 0c1e164eb52d802d26cbc95bca124505bcc5562c Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Tue, 18 Aug 2026 11:46:56 -0700
Subject: [PATCH 12/13] fix(web): color pull request diff totals

---
 .../components/pullRequest/PullRequestCodeTab.tsx | 15 +++++++++++++--
 .../pullRequest/pullRequestPresentation.tsx       |  6 ++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index b0e00d57cc61..7795b63e197d 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -36,6 +36,7 @@ import {
   buildFileDiffRenderKey,
   fnv1a32,
   getDiffLineStat,
+  getDiffColorSchemeClassName,
   getRenderablePatch,
   resolveDiffThemeName,
   resolveFileDiffPath,
@@ -1161,7 +1162,12 @@ export function PullRequestCodeTab({
   // The toolbar rides above every branch below, not just the one with a patch in it: a commit
   // whose diff is empty or unreadable still needs the scope dropdown that got the reader there.
   const withReviewBar = (body: ReactNode) => (
-    <div className="flex h-full min-h-0 flex-col">
+    <div
+      className={cn(
+        "flex h-full min-h-0 flex-col",
+        getDiffColorSchemeClassName(settings.diffColorScheme),
+      )}
+    >
       {toolbar}
       {/* The overlay is anchored to this wrapper, not the scroller: absolute positioning
           inside an overflowing element tracks the content's bottom edge, which would carry
@@ -1245,7 +1251,12 @@ export function PullRequestCodeTab({
 
   return (
     <DiffWorkerPoolProvider>
-      <div className="flex h-full min-h-0 flex-col">
+      <div
+        className={cn(
+          "flex h-full min-h-0 flex-col",
+          getDiffColorSchemeClassName(settings.diffColorScheme),
+        )}
+      >
         {toolbar}
         {/* Above the code, closed, and counted: these belong to the change rather than to any
             line of it, and in the stream they read as cards dropped into the patch. */}
diff --git a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
index 9161e4a82007..72448c8d434a 100644
--- a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
+++ b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
@@ -384,10 +384,12 @@ export function PullRequestDiffStat({
   }
   return (
     <span className={cn("inline-flex items-baseline gap-1 tabular-nums", className)}>
-      <span className="text-emerald-600 dark:text-emerald-300/90">
+      <span className="text-[var(--t3-diff-addition-color,var(--success))]">
         +{additions.toLocaleString()}
       </span>
-      <span className="text-destructive">-{deletions.toLocaleString()}</span>
+      <span className="text-[var(--t3-diff-deletion-color,var(--destructive))]">
+        -{deletions.toLocaleString()}
+      </span>
     </span>
   );
 }

From b0c67533656c453a52d5fa14201cb7f72e07ac73 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Tue, 18 Aug 2026 11:56:00 -0700
Subject: [PATCH 13/13] fix(web): apply diff palette globally

---
 apps/web/src/components/DiffPanel.tsx             |  6 +-----
 apps/web/src/components/chat/ChangedFilesTree.tsx |  9 +--------
 .../components/pullRequest/PullRequestCodeTab.tsx | 15 ++-------------
 .../src/components/settings/SettingsPanels.tsx    |  3 +--
 apps/web/src/routes/__root.tsx                    | 14 ++++++++++++++
 5 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 61f8b0904a56..53de0fdb8dd2 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -31,7 +31,6 @@ import { selectThreadDiffPanelSelection, useDiffPanelStore } from "../diffPanelS
 import { useTheme } from "../hooks/useTheme";
 import {
   buildFileDiffRenderKey,
-  getDiffColorSchemeClassName,
   getDiffCollapseIconClassName,
   getDiffLineStat,
   getRenderablePatch,
@@ -716,10 +715,7 @@ export default function DiffPanel({
           <DiffStatLabel
             additions={diffLineStat.additions}
             deletions={diffLineStat.deletions}
-            className={cn(
-              "mr-1 text-[11px]",
-              getDiffColorSchemeClassName(settings.diffColorScheme),
-            )}
+            className="mr-1 text-[11px]"
             layout="inline"
           />
         )}
diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
index b763169cbac2..6ec1710d7caa 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -15,8 +15,6 @@ import {
   FolderClosedIcon,
 } from "lucide-react";
 import { cn } from "~/lib/utils";
-import { useClientSettings } from "~/hooks/useSettings";
-import { getDiffColorSchemeClassName } from "~/lib/diffRendering";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
 import { PierreEntryIcon } from "./PierreEntryIcon";
 import { Button } from "../ui/button";
@@ -55,14 +53,9 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
   const scopeSummary = useMemo(() => summarizeChangedFileScopes(files), [files]);
   const previewFiles = useMemo(() => selectChangedFilePreview(files), [files]);
   const compactPreviewVisible = showCompactPreview && !expanded;
-  const { diffColorScheme } = useClientSettings();
-
   return (
     <div
-      className={cn(
-        "@container/changed-files mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32",
-        getDiffColorSchemeClassName(diffColorScheme),
-      )}
+      className="@container/changed-files mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32"
       data-changed-files-state={
         expanded ? "expanded" : compactPreviewVisible ? "preview" : "collapsed"
       }
diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index 7795b63e197d..b0e00d57cc61 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -36,7 +36,6 @@ import {
   buildFileDiffRenderKey,
   fnv1a32,
   getDiffLineStat,
-  getDiffColorSchemeClassName,
   getRenderablePatch,
   resolveDiffThemeName,
   resolveFileDiffPath,
@@ -1162,12 +1161,7 @@ export function PullRequestCodeTab({
   // The toolbar rides above every branch below, not just the one with a patch in it: a commit
   // whose diff is empty or unreadable still needs the scope dropdown that got the reader there.
   const withReviewBar = (body: ReactNode) => (
-    <div
-      className={cn(
-        "flex h-full min-h-0 flex-col",
-        getDiffColorSchemeClassName(settings.diffColorScheme),
-      )}
-    >
+    <div className="flex h-full min-h-0 flex-col">
       {toolbar}
       {/* The overlay is anchored to this wrapper, not the scroller: absolute positioning
           inside an overflowing element tracks the content's bottom edge, which would carry
@@ -1251,12 +1245,7 @@ export function PullRequestCodeTab({
 
   return (
     <DiffWorkerPoolProvider>
-      <div
-        className={cn(
-          "flex h-full min-h-0 flex-col",
-          getDiffColorSchemeClassName(settings.diffColorScheme),
-        )}
-      >
+      <div className="flex h-full min-h-0 flex-col">
         {toolbar}
         {/* Above the code, closed, and counted: these belong to the change rather than to any
             line of it, and in the stream they read as cards dropped into the patch. */}
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 80da7848dc88..48d3a5cc517f 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -1328,7 +1328,7 @@ function WordWrapRow() {
   );
 }
 
-function DiffAppearanceRows({ children }: { children?: ReactNode }) {
+function DiffAppearanceRows() {
   const settings = usePrimarySettings();
   const updateSettings = useUpdatePrimarySettings();
   return (
@@ -1413,7 +1413,6 @@ function DiffAppearanceRows({ children }: { children?: ReactNode }) {
         }
       >
         <DiffPreview />
-        {children}
       </SettingsRow>
     </>
   );
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index c4f65564efc7..cf6eb591e922 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -30,6 +30,7 @@ import {
 } from "../components/ui/toast";
 import { resolveAndPersistPreferredEditor } from "../editorPreferences";
 import { applyAppearanceFontVariables } from "~/appearanceFonts";
+import { getDiffColorSchemeClassName } from "~/lib/diffRendering";
 import { useClientSettings } from "../hooks/useSettings";
 import {
   deriveLogicalProjectKeyFromSettings,
@@ -132,6 +133,7 @@ function RootRouteView() {
         <DocumentTitleSync />
         <GlassAppearanceSync />
         <FontAppearanceSync />
+        <DiffAppearanceSync />
         {primaryEnvironmentAuthenticated ? <AuthenticatedTracingBootstrap /> : null}
         <RelayClientInstallDialog />
         <ConnectOnboardingDialog />
@@ -192,6 +194,18 @@ function FontAppearanceSync() {
   return null;
 }
 
+function DiffAppearanceSync() {
+  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
+
+  useEffect(() => {
+    const classNames = getDiffColorSchemeClassName(diffColorScheme).split(" ");
+    document.documentElement.classList.add(...classNames);
+    return () => document.documentElement.classList.remove(...classNames);
+  }, [diffColorScheme]);
+
+  return null;
+}
+
 function DocumentTitleSync() {
   const primaryServerVersion =
     useAtomValue(primaryServerConfigAtom)?.environment.serverVersion ?? null;