provider theme api for cli part

Author: MrWangJustToDo

packages/cli/index.d.ts

@@ -1005,6 +1005,37 @@ export declare enum DiffModeEnum {
 	Split = 3,
 	Unified = 4
 }
+export type ThemeColor = {
+	light: string;
+	dark: string;
+};
+export interface DiffViewColorTheme {
+	addContent?: ThemeColor;
+	delContent?: ThemeColor;
+	plainContent?: ThemeColor;
+	expandContent?: ThemeColor;
+	emptyContent?: ThemeColor;
+	addLineNumber?: ThemeColor;
+	delLineNumber?: ThemeColor;
+	plainLineNumber?: ThemeColor;
+	expandLineNumber?: ThemeColor;
+	hunkLineNumber?: ThemeColor;
+	plainLineNumberColor?: ThemeColor;
+	expandLineNumberColor?: ThemeColor;
+	hunkContentColor?: ThemeColor;
+	addContentHighlight?: ThemeColor;
+	delContentHighlight?: ThemeColor;
+	hunkContent?: ThemeColor;
+	border?: ThemeColor;
+	noBGAddContent?: ThemeColor;
+	noBGDelContent?: ThemeColor;
+	noBGAddLineNumber?: ThemeColor;
+	noBGDelLineNumber?: ThemeColor;
+	noBGAddContentHighlight?: ThemeColor;
+	noBGDelContentHighlight?: ThemeColor;
+}
+export type ResolvedDiffViewColorTheme = Required<DiffViewColorTheme>;
+export declare const buildTheme: (overrides?: DiffViewColorTheme) => ResolvedDiffViewColorTheme;
 export type DiffViewProps<T> = {
 	data?: {
 		oldFile?: {
@@ -1037,6 +1068,7 @@ export type DiffViewProps<T> = {
 	diffViewHighlight?: boolean;
 	diffViewHideOperator?: boolean;
 	diffViewNoBG?: boolean;
+	diffViewThemeColors?: DiffViewColorTheme;
 	renderExtendLine?: ({ diffFile, side, data, lineNumber, onUpdate, }: {
 		lineNumber: number;
 		side: SplitSide;
@@ -1104,6 +1136,7 @@ export type CodeViewProps<T> = {
 	registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
 	codeViewHighlight?: boolean;
 	codeViewNoBG?: boolean;
+	codeViewThemeColors?: DiffViewColorTheme;
 	renderExtendLine?: ({ file, data, lineNumber }: {
 		file: File$1;
 		lineNumber: number;

packages/cli/src/components/CodeContent.tsx

@@ -7,9 +7,9 @@ import * as React from "react";
 
 import { buildAnsiStringWithLineBreaks, buildStyledBlock, type CharStyle } from "./ansiString";
 import { useCodeViewContext } from "./CodeViewContext";
-import { diffPlainContent } from "./color";
 import { getStyleObjectFromString, getStyleFromClassName } from "./DiffContent";
 
+import type { ResolvedDiffViewColorTheme } from "./color";
 import type { File } from "@git-diff-view/core";
 
 // Helper to get tab width value
@@ -212,6 +212,7 @@ CodePadding.displayName = "CodePadding";
 export const CodeContent = React.memo(
   ({
     theme,
+    themeColors,
     width,
     height,
     rawLine,
@@ -222,6 +223,7 @@ export const CodeContent = React.memo(
     width: number;
     height: number;
     theme: "light" | "dark";
+    themeColors: ResolvedDiffViewColorTheme;
     rawLine: string;
     plainLine?: File["plainFile"][number];
     syntaxLine?: File["syntaxFile"][number];
@@ -232,8 +234,8 @@ export const CodeContent = React.memo(
 
     const bg = React.useMemo(() => {
       if (noBG) return undefined;
-      return theme === "light" ? diffPlainContent.light : diffPlainContent.dark;
-    }, [theme, noBG]);
+      return theme === "light" ? themeColors.plainContent.light : themeColors.plainContent.dark;
+    }, [theme, noBG, themeColors]);
 
     // Content width is total width minus 2 char padding (1 on each side)
     const contentWidth = width - 2;

packages/cli/src/components/CodeView.tsx

@@ -13,8 +13,8 @@ import { CodeExtendLine } from "./CodeExtendLine";
 import { CodeLineNumberArea } from "./CodeLineNumber";
 import { createCodeConfigStore, getCurrentLineRow } from "./codeTools";
 import { CodeViewContext, useCodeViewContext } from "./CodeViewContext";
-import { diffPlainLineNumber, diffPlainLineNumberColor } from "./color";
 
+import type { DiffViewColorTheme, ResolvedDiffViewColorTheme } from "./color";
 import type { DiffHighlighter, DiffHighlighterLang, File } from "@git-diff-view/core";
 import type { DOMElement } from "ink";
 import type { ForwardedRef, JSX, ReactNode, RefObject } from "react";
@@ -38,6 +38,8 @@ export type CodeViewProps<T> = {
   codeViewHighlight?: boolean;
   // disable background colors for transparent terminal rendering
   codeViewNoBG?: boolean;
+  // custom theme colors to override defaults
+  codeViewThemeColors?: DiffViewColorTheme;
   renderExtendLine?: ({ file, data, lineNumber }: { file: File; lineNumber: number; data: T }) => ReactNode;
 };
 
@@ -69,6 +71,7 @@ const CodeLine = memo(
     lineNumWidth,
     enableHighlight,
     noBG,
+    themeColors,
   }: {
     lineNumber: number;
     theme: "light" | "dark";
@@ -77,6 +80,7 @@ const CodeLine = memo(
     lineNumWidth: number;
     enableHighlight: boolean;
     noBG: boolean;
+    themeColors: ResolvedDiffViewColorTheme;
   }) => {
     const rawLine = file.rawFile[lineNumber] || "";
     const syntaxLine = file.syntaxFile[lineNumber];
@@ -87,8 +91,12 @@ const CodeLine = memo(
     // Calculate row height based on actual text width (content width minus 2 char padding on both sides)
     const row = getCurrentLineRow({ content: rawLine, width: contentWidth - 2 });
 
-    const bg = noBG ? undefined : theme === "light" ? diffPlainLineNumber.light : diffPlainLineNumber.dark;
-    const color = theme === "light" ? diffPlainLineNumberColor.light : diffPlainLineNumberColor.dark;
+    const bg = noBG
+      ? undefined
+      : theme === "light"
+        ? themeColors.plainLineNumber.light
+        : themeColors.plainLineNumber.dark;
+    const color = theme === "light" ? themeColors.plainLineNumberColor.light : themeColors.plainLineNumberColor.dark;
 
     return (
       <Box data-line={lineNumber} height={row} width={columns}>
@@ -109,6 +117,7 @@ const CodeLine = memo(
           syntaxLine={syntaxLine}
           enableHighlight={enableHighlight}
           noBG={noBG}
+          themeColors={themeColors}
         />
       </Box>
     );
@@ -123,9 +132,10 @@ CodeLine.displayName = "CodeLine";
 const CodeViewContent = memo(({ file, theme, width }: { file: File; theme: "light" | "dark"; width?: number }) => {
   const { useCodeContext } = useCodeViewContext();
 
-  const { enableHighlight, noBG } = useCodeContext((s) => ({
+  const { enableHighlight, noBG, themeColors } = useCodeContext((s) => ({
     enableHighlight: s.enableHighlight,
     noBG: s.noBG,
+    themeColors: s.themeColors,
   }));
 
   const { columns: _columns } = useCodeTerminalSize();
@@ -158,6 +168,7 @@ const CodeViewContent = memo(({ file, theme, width }: { file: File; theme: "ligh
             lineNumWidth={lineNumWidth}
             enableHighlight={enableHighlight ?? false}
             noBG={noBG ?? false}
+            themeColors={themeColors}
           />
           <CodeExtendLine columns={columns} lineNumber={lineNumber} file={file} />
         </Fragment>
@@ -188,6 +199,7 @@ const InternalCodeView = <T,>(
     codeViewTabWidth,
     codeViewTheme,
     codeViewNoBG,
+    codeViewThemeColors,
   } = props;
 
   const fileId = file.getId();
@@ -213,6 +225,7 @@ const InternalCodeView = <T,>(
       setTabWidth,
       noBG,
       setNoBG,
+      setThemeColors,
     } = useCodeContext.getReadonlyState();
 
     if (fileId && fileId !== id) {
@@ -246,6 +259,8 @@ const InternalCodeView = <T,>(
     if (codeViewNoBG !== noBG) {
       setNoBG(!!codeViewNoBG);
     }
+
+    setThemeColors(codeViewThemeColors);
   }, [
     _width,
     useCodeContext,
@@ -256,6 +271,7 @@ const InternalCodeView = <T,>(
     codeViewTabSpace,
     codeViewTabWidth,
     codeViewNoBG,
+    codeViewThemeColors,
     props.extendData,
     props.renderExtendLine,
   ]);

packages/cli/src/components/DiffContent.tsx

@@ -5,22 +5,10 @@ import { Box, Text } from "ink";
 import * as React from "react";
 
 import { buildAnsiStringWithLineBreaks, buildStyledBlock, type CharStyle } from "./ansiString";
-import {
-  diffAddContent,
-  diffAddContentHighlight,
-  diffDelContent,
-  diffDelContentHighlight,
-  diffExpandContent,
-  diffPlainContent,
-  noBGDiffAddContent,
-  noBGDiffAddContentHighlight,
-  noBGDiffDelContent,
-  noBGDiffDelContentHighlight,
-  GitHubDark,
-  GitHubLight,
-} from "./color";
+import { GitHubDark, GitHubLight } from "./color";
 import { useDiffViewContext } from "./DiffViewContext";
 
+import type { ResolvedDiffViewColorTheme } from "./color";
 import type { DiffFile, DiffLine, File } from "@git-diff-view/core";
 
 // Helper to get tab width value
@@ -115,6 +103,7 @@ const DiffString = React.memo(
     diffLine,
     operator,
     noBG,
+    themeColors,
   }: {
     bg?: string;
     width: number;
@@ -125,6 +114,7 @@ const DiffString = React.memo(
     operator?: "add" | "del";
     plainLine?: File["plainFile"][number];
     noBG?: boolean;
+    themeColors: ResolvedDiffViewColorTheme;
   }) => {
     const changes = diffLine?.changes;
 
@@ -145,8 +135,8 @@ const DiffString = React.memo(
         const str2 = rawLine.slice(range.location, range.location + range.length);
         const str3 = rawLine.slice(range.location + range.length);
 
-        const addHighlight = noBG ? noBGDiffAddContentHighlight : diffAddContentHighlight;
-        const delHighlight = noBG ? noBGDiffDelContentHighlight : diffDelContentHighlight;
+        const addHighlight = noBG ? themeColors.noBGAddContentHighlight : themeColors.addContentHighlight;
+        const delHighlight = noBG ? themeColors.noBGDelContentHighlight : themeColors.delContentHighlight;
         const highlightBG =
           operator === "add"
             ? theme === "light"
@@ -176,7 +166,7 @@ const DiffString = React.memo(
 
       // Use width - 2 because the operator column takes 1 character and end padding takes 1 character
       return buildAnsiStringWithLineBreaks(chars, width - 2);
-    }, [bg, width, theme, rawLine, changes, operator, enableTabSpace, tabWidth, noBG]);
+    }, [bg, width, theme, rawLine, changes, operator, enableTabSpace, tabWidth, noBG, themeColors]);
 
     return (
       <Box width={width - 2} backgroundColor={bg}>
@@ -246,6 +236,7 @@ const DiffSyntax = React.memo(
     operator,
     syntaxLine,
     noBG,
+    themeColors,
   }: {
     bg?: string;
     width: number;
@@ -256,6 +247,7 @@ const DiffSyntax = React.memo(
     syntaxLine?: File["syntaxFile"][number];
     operator?: "add" | "del";
     noBG?: boolean;
+    themeColors: ResolvedDiffViewColorTheme;
   }) => {
     const { useDiffContext } = useDiffViewContext();
 
@@ -273,8 +265,8 @@ const DiffSyntax = React.memo(
       const chars: Array<{ char: string; style?: CharStyle }> = [];
       const baseStyle: CharStyle = { backgroundColor: bg };
 
-      const addHighlight = noBG ? noBGDiffAddContentHighlight : diffAddContentHighlight;
-      const delHighlight = noBG ? noBGDiffDelContentHighlight : diffDelContentHighlight;
+      const addHighlight = noBG ? themeColors.noBGAddContentHighlight : themeColors.addContentHighlight;
+      const delHighlight = noBG ? themeColors.noBGDelContentHighlight : themeColors.delContentHighlight;
       const highlightBG =
         operator === "add"
           ? theme === "light"
@@ -355,7 +347,7 @@ const DiffSyntax = React.memo(
 
       // Use width - 2 because the operator column takes 1 character and end padding takes 1 character
       return buildAnsiStringWithLineBreaks(chars, width - 2);
-    }, [bg, width, theme, diffLine, operator, syntaxLine, enableTabSpace, tabWidth, noBG]);
+    }, [bg, width, theme, diffLine, operator, syntaxLine, enableTabSpace, tabWidth, noBG, themeColors]);
 
     // Fallback to DiffString if no syntax line
     if (!syntaxLine) {
@@ -369,6 +361,7 @@ const DiffSyntax = React.memo(
           diffLine={diffLine}
           operator={operator}
           noBG={noBG}
+          themeColors={themeColors}
         />
       );
     }
@@ -448,6 +441,7 @@ export const DiffContent = React.memo(
     syntaxLine,
     enableHighlight,
     noBG,
+    themeColors,
   }: {
     width: number;
     height: number;
@@ -459,6 +453,7 @@ export const DiffContent = React.memo(
     diffFile: DiffFile;
     enableHighlight: boolean;
     noBG?: boolean;
+    themeColors: ResolvedDiffViewColorTheme;
   }) => {
     const { useDiffContext } = useDiffViewContext();
 
@@ -469,19 +464,19 @@ export const DiffContent = React.memo(
     const isMaxLineLengthToIgnoreSyntax = syntaxLine && syntaxLine?.nodeList?.length > 150;
 
     const bg = React.useMemo(() => {
-      const addColors = noBG ? noBGDiffAddContent : diffAddContent;
-      const delColors = noBG ? noBGDiffDelContent : diffDelContent;
+      const addColors = noBG ? themeColors.noBGAddContent : themeColors.addContent;
+      const delColors = noBG ? themeColors.noBGDelContent : themeColors.delContent;
       if (isAdded) return theme === "light" ? addColors.light : addColors.dark;
       if (isDelete) return theme === "light" ? delColors.light : delColors.dark;
       if (noBG) return undefined;
       return theme === "light"
         ? diffLine
-          ? diffPlainContent.light
-          : diffExpandContent.light
+          ? themeColors.plainContent.light
+          : themeColors.expandContent.light
         : diffLine
-          ? diffPlainContent.dark
-          : diffExpandContent.dark;
-    }, [theme, diffLine, isAdded, isDelete, noBG]);
+          ? themeColors.plainContent.dark
+          : themeColors.expandContent.dark;
+    }, [theme, diffLine, isAdded, isDelete, noBG, themeColors]);
 
     const operatorChar = isAdded ? "+" : isDelete ? "-" : " ";
 
@@ -503,6 +498,7 @@ export const DiffContent = React.memo(
             diffLine={diffLine}
             syntaxLine={syntaxLine}
             noBG={noBG}
+            themeColors={themeColors}
           />
         ) : (
           <DiffString
@@ -515,6 +511,7 @@ export const DiffContent = React.memo(
             diffLine={diffLine}
             plainLine={plainLine}
             noBG={noBG}
+            themeColors={themeColors}
           />
         )}
         <DiffPadding height={height} backgroundColor={bg} />