Add colorblind mode setting

apps/web/src/components/DiffPanel.tsx

@@ -38,7 +38,11 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group";
 type DiffRenderMode = "stacked" | "split";
 type DiffThemeType = "light" | "dark";
 
-const DIFF_PANEL_UNSAFE_CSS = `
+function buildDiffPanelCss(colorblind: boolean): string {
+  const addition = colorblind ? "var(--cb-addition)" : "var(--success)";
+  const deletion = colorblind ? "var(--cb-deletion)" : "var(--destructive)";
+
+  return `
 [data-diffs-header],
 [data-diff],
 [data-file],
@@ -55,23 +59,23 @@ const DIFF_PANEL_UNSAFE_CSS = `
   --diffs-bg-separator-override: color-mix(in srgb, var(--background) 95%, var(--foreground));
   --diffs-bg-buffer-override: color-mix(in srgb, var(--background) 90%, var(--foreground));
 
-  --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, var(--success));
-  --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, var(--success));
-  --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, var(--success));
-  --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, var(--success));
-
-  --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, var(--destructive));
-  --diffs-bg-deletion-number-override: color-mix(in srgb, var(--background) 88%, var(--destructive));
-  --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, var(--destructive));
-  --diffs-bg-deletion-emphasis-override: color-mix(
-    in srgb,
-    var(--background) 80%,
-    var(--destructive)
-  );
+  --diffs-addition-color-override: ${addition};
+  --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, ${addition});
+  --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, ${addition});
+  --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, ${addition});
+  --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, ${addition});
+
+  --diffs-deletion-color-override: ${deletion};
+  --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, ${deletion});
+  --diffs-bg-deletion-number-override: color-mix(in srgb, var(--background) 88%, ${deletion});
+  --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, ${deletion});
+  --diffs-bg-deletion-emphasis-override: color-mix(in srgb, var(--background) 80%, ${deletion});
 
   background-color: var(--diffs-bg) !important;
+}`;
 }
 
+const DIFF_PANEL_STATIC_CSS = `
 [data-file-info] {
   background-color: color-mix(in srgb, var(--card) 94%, var(--foreground)) !important;
   border-block-color: var(--border) !important;
@@ -169,6 +173,10 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   const settings = useSettings();
   const [diffRenderMode, setDiffRenderMode] = useState<DiffRenderMode>("stacked");
   const [diffWordWrap, setDiffWordWrap] = useState(settings.diffWordWrap);
+  const diffUnsafeCss = useMemo(
+    () => buildDiffPanelCss(settings.colorblindMode) + DIFF_PANEL_STATIC_CSS,
+    [settings.colorblindMode],
+  );
   const patchViewportRef = useRef<HTMLDivElement>(null);
   const turnStripRef = useRef<HTMLDivElement>(null);
   const previousDiffOpenRef = useRef(false);
@@ -615,7 +623,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                           overflow: diffWordWrap ? "wrap" : "scroll",
                           theme: resolveDiffThemeName(resolvedTheme),
                           themeType: resolvedTheme as DiffThemeType,
-                          unsafeCSS: DIFF_PANEL_UNSAFE_CSS,
+                          unsafeCSS: diffUnsafeCss,
                         }}
                       />
                     </div>

apps/web/src/components/GitActionsControl.tsx

@@ -970,9 +970,9 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
                                     <span className="text-muted-foreground">Excluded</span>
                                   ) : (
                                     <>
-                                      <span className="text-success">+{file.insertions}</span>
+                                      <span className="diff-stat-addition">+{file.insertions}</span>
                                       <span className="text-muted-foreground"> / </span>
-                                      <span className="text-destructive">-{file.deletions}</span>
+                                      <span className="diff-stat-deletion">-{file.deletions}</span>
                                     </>
                                   )}
                                 </span>
@@ -983,11 +983,11 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
                       </div>
                     </ScrollArea>
                     <div className="flex justify-end font-mono">
-                      <span className="text-success">
+                      <span className="diff-stat-addition">
                         +{selectedFiles.reduce((sum, f) => sum + f.insertions, 0)}
                       </span>
                       <span className="text-muted-foreground"> / </span>
-                      <span className="text-destructive">
+                      <span className="diff-stat-deletion">
                         -{selectedFiles.reduce((sum, f) => sum + f.deletions, 0)}
                       </span>
                     </div>

apps/web/src/components/chat/DiffStatLabel.tsx

@@ -13,9 +13,9 @@ export const DiffStatLabel = memo(function DiffStatLabel(props: {
   return (
     <>
       {showParentheses && <span className="text-muted-foreground/70">(</span>}
-      <span className="text-success">+{additions}</span>
+      <span className="diff-stat-addition">+{additions}</span>
       <span className="mx-0.5 text-muted-foreground/70">/</span>
-      <span className="text-destructive">-{deletions}</span>
+      <span className="diff-stat-deletion">-{deletions}</span>
       {showParentheses && <span className="text-muted-foreground/70">)</span>}
     </>
   );

apps/web/src/components/settings/SettingsPanels.tsx

@@ -457,6 +457,9 @@ export function useSettingsRestore(onRestored?: () => void) {
   const changedSettingLabels = useMemo(
     () => [
       ...(theme !== "system" ? ["Theme"] : []),
+      ...(settings.colorblindMode !== DEFAULT_UNIFIED_SETTINGS.colorblindMode
+        ? ["Colorblind mode"]
+        : []),
       ...(settings.timestampFormat !== DEFAULT_UNIFIED_SETTINGS.timestampFormat
         ? ["Time format"]
         : []),
@@ -481,6 +484,7 @@ export function useSettingsRestore(onRestored?: () => void) {
     [
       areProviderSettingsDirty,
       isGitWritingModelDirty,
+      settings.colorblindMode,
       settings.confirmThreadArchive,
       settings.confirmThreadDelete,
       settings.defaultThreadEnvMode,
@@ -814,6 +818,30 @@ export function GeneralSettingsPanel() {
           }
         />
 
+        <SettingsRow
+          title="Colorblind mode"
+          description="Replace red/green with blue/orange across diffs and stats."
+          resetAction={
+            settings.colorblindMode !== DEFAULT_UNIFIED_SETTINGS.colorblindMode ? (
+              <SettingResetButton
+                label="colorblind mode"
+                onClick={() =>
+                  updateSettings({
+                    colorblindMode: DEFAULT_UNIFIED_SETTINGS.colorblindMode,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.colorblindMode}
+              onCheckedChange={(checked) => updateSettings({ colorblindMode: Boolean(checked) })}
+              aria-label="Enable colorblind mode"
+            />
+          }
+        />
+
         <SettingsRow
           title="Diff line wrapping"
           description="Set the default wrap state when the diff panel opens."

apps/web/src/hooks/useSettings.test.ts

@@ -13,4 +13,8 @@ describe("buildLegacyClientSettingsMigrationPatch", () => {
       confirmThreadDelete: false,
     });
   });
+
+  it("does not migrate colorblindMode since it never existed in legacy settings", () => {
+    expect(buildLegacyClientSettingsMigrationPatch({ colorblindMode: true })).toEqual({});
+  });
 });

apps/web/src/hooks/useSettings.ts

@@ -31,7 +31,7 @@ import {
 } from "@t3tools/contracts/settings";
 import { serverConfigQueryOptions, serverQueryKeys } from "~/lib/serverReactQuery";
 import { ensureNativeApi } from "~/nativeApi";
-import { useLocalStorage } from "./useLocalStorage";
+import { getLocalStorageItem, useLocalStorage } from "./useLocalStorage";
 import { normalizeCustomModelSlugs } from "~/modelSelection";
 import { Predicate, Schema, Struct } from "effect";
 import { DeepMutable } from "effect/Types";
@@ -268,3 +268,19 @@ export function migrateLocalSettingsToServer(): void {
     localStorage.removeItem(OLD_SETTINGS_KEY);
   }
 }
+
+// ── Colorblind mode root class ──────────────────────────────────
+
+export function applyColorblindMode(enabled: boolean): void {
+  if (typeof document === "undefined") return;
+  document.documentElement.classList.toggle("colorblind-mode", enabled);
+}
+
+export function getStoredColorblindMode(): boolean {
+  try {
+    const stored = getLocalStorageItem(CLIENT_SETTINGS_STORAGE_KEY, ClientSettingsSchema);
+    return stored?.colorblindMode ?? false;
+  } catch {
+    return false;
+  }
+}

apps/web/src/index.css

@@ -120,6 +120,34 @@
   }
 }
 
+/* Colorblind mode: blue/orange for addition/deletion comparative contexts.
+   Colors from GitHub Primer @primer/primitives diffBlob tokens. */
+:root.colorblind-mode {
+  --cb-addition: #0969da;
+  --cb-deletion: #bc4c00;
+}
+
+:root.colorblind-mode.dark {
+  --cb-addition: #388bfd;
+  --cb-deletion: #db6d28;
+}
+
+.diff-stat-addition {
+  color: var(--color-success);
+}
+
+.diff-stat-deletion {
+  color: var(--color-destructive);
+}
+
+:root.colorblind-mode .diff-stat-addition {
+  color: var(--cb-addition);
+}
+
+:root.colorblind-mode .diff-stat-deletion {
+  color: var(--cb-deletion);
+}
+
 body {
   font-family:
     "DM Sans",

apps/web/src/main.tsx

@@ -9,13 +9,15 @@ import "./index.css";
 import { isElectron } from "./env";
 import { getRouter } from "./router";
 import { APP_DISPLAY_NAME } from "./branding";
+import { applyColorblindMode, getStoredColorblindMode } from "./hooks/useSettings";
 
 // Electron loads the app from a file-backed shell, so hash history avoids path resolution issues.
 const history = isElectron ? createHashHistory() : createBrowserHistory();
 
 const router = getRouter(history);
 
 document.title = APP_DISPLAY_NAME;
+applyColorblindMode(getStoredColorblindMode());
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

apps/web/src/routes/__root.tsx

@@ -22,7 +22,11 @@ import { useStore } from "../store";
 import { useTerminalStateStore } from "../terminalStateStore";
 import { terminalRunningSubprocessFromEvent } from "../terminalActivity";
 import { onServerConfigUpdated, onServerProvidersUpdated, onServerWelcome } from "../wsNativeApi";
-import { migrateLocalSettingsToServer } from "../hooks/useSettings";
+import {
+  applyColorblindMode,
+  migrateLocalSettingsToServer,
+  useSettings,
+} from "../hooks/useSettings";
 import { providerQueryKeys } from "../lib/providerReactQuery";
 import { projectQueryKeys } from "../lib/projectReactQuery";
 import { collectActiveTerminalThreadIds } from "../lib/terminalStateCleanup";
@@ -53,6 +57,7 @@ function RootRouteView() {
   return (
     <ToastProvider>
       <AnchoredToastProvider>
+        <ColorblindModeSync />
         <EventRouter />
         <DesktopProjectBootstrap />
         <AppSidebarLayout>
@@ -63,6 +68,14 @@ function RootRouteView() {
   );
 }
 
+function ColorblindModeSync() {
+  const settings = useSettings();
+  useEffect(() => {
+    applyColorblindMode(settings.colorblindMode);
+  }, [settings.colorblindMode]);
+  return null;
+}
+
 function RootRouteErrorView({ error, reset }: ErrorComponentProps) {
   const message = errorMessage(error);
   const details = errorDetails(error);

packages/contracts/src/settings.ts

@@ -24,6 +24,7 @@ export type SidebarThreadSortOrder = typeof SidebarThreadSortOrder.Type;
 export const DEFAULT_SIDEBAR_THREAD_SORT_ORDER: SidebarThreadSortOrder = "updated_at";
 
 export const ClientSettingsSchema = Schema.Struct({
+  colorblindMode: Schema.Boolean.pipe(Schema.withDecodingDefault(() => false)),
   confirmThreadArchive: Schema.Boolean.pipe(Schema.withDecodingDefault(() => false)),
   confirmThreadDelete: Schema.Boolean.pipe(Schema.withDecodingDefault(() => true)),
   diffWordWrap: Schema.Boolean.pipe(Schema.withDecodingDefault(() => false)),