@anaralabs/lector 3.12.9 → 3.13.1

package/dist/_tsup-dts-rollup.d.ts

@@ -132,6 +132,23 @@ declare interface AnnotationTooltipProps {
     }) => React.ReactNode;
 }
 
+/**
+ * Recolors a 2D context at draw time: every fill/stroke whose style is a
+ * string is painted with `map(style)` and the original style is restored
+ * right after, so pdf.js readbacks (`ctx.fillStyle`, `copyCtxState`,
+ * save/restore) always observe original-document colors and nothing is ever
+ * mapped twice. Gradients are recolored per stop at creation. `drawImage`
+ * and `putImageData` are deliberately untouched — photos keep their pixels —
+ * with one exception: a drawImage that composes a luminosity soft mask
+ * (destination-in through a pdf.js `*_luminosity_map_*` filter) draws a
+ * luma-corrected copy of the mask so the recoloring doesn't invert the
+ * mask's alpha.
+ *
+ * Wrapping installs own properties on the context instance (the prototype is
+ * never modified). Returns a cleanup that restores the pristine context.
+ */
+export declare function applyContextRecolor(ctx: CanvasRenderingContext2D, map: RenderColorMap): () => void;
+
 /**
  * Calculates the highlight rectangles for a given text match.
  *
@@ -151,6 +168,11 @@ export declare const cancellable: <T extends Promise<unknown>>(promise: T) => {
     cancel: () => void;
 };
 
+declare interface CanvasAndContext {
+    canvas: HTMLCanvasElement | null;
+    context: CanvasRenderingContext2D | null;
+}
+
 export declare const CanvasLayer: MemoExoticComponent<({ style, background, ...props }: HTMLProps<HTMLCanvasElement> & {
 background?: string;
 }) => JSX.Element>;
@@ -182,6 +204,49 @@ declare type ColoredHighlightLayerProps = {
     onHighlight?: (highlight: ColoredHighlight) => void;
 };
 
+declare type ColorScheme = "light" | "dark";
+export { ColorScheme }
+export { ColorScheme as ColorScheme_alias_1 }
+
+/**
+ * Builds a memoized color map that flips perceived lightness onto the
+ * background<->foreground ramp while preserving hue and chroma (OKLab).
+ * Position on the ramp follows gamma-encoded BT.709 luma — the same measure
+ * "luminance inversion" night modes use — so saturated accents move the way
+ * readers expect (red becomes pink, not cyan; blue links become light blue).
+ * Neutrals land exactly on the ramp: white maps to `background`, black to
+ * `foreground`, including the palette's tint.
+ */
+declare function createDarkModeColorMap(colors?: DarkModeColors): RenderColorMap;
+export { createDarkModeColorMap }
+export { createDarkModeColorMap as createDarkModeColorMap_alias_1 }
+
+/**
+ * pdf.js paints transparency groups, soft masks, tiling/shading patterns and
+ * image-mask fills on internal scratch canvases obtained from the document's
+ * CanvasFactory — that content never touches the context we hand to
+ * `page.render()`. Passing this factory via getDocument's `CanvasFactory`
+ * option extends dark-mode recoloring to those canvases, which is what makes
+ * the scheme complete (pages with a page-level transparency group otherwise
+ * render entirely on a scratch canvas).
+ *
+ * The map is captured per canvas at creation time from `mapRef`; scratch
+ * canvases only live for a single render task, so toggling the scheme simply
+ * takes effect on the next render.
+ */
+export declare function createRecolorCanvasFactory(mapRef: RenderColorMapRef): {
+    new ({ ownerDocument, enableHWA, }?: {
+        ownerDocument?: Document;
+        enableHWA?: boolean;
+    }): {
+        "__#44@#document": Document;
+        "__#44@#enableHWA": boolean;
+        create(width: number, height: number): CanvasAndContext;
+        reset(canvasAndContext: CanvasAndContext, width: number, height: number): void;
+        destroy(canvasAndContext: CanvasAndContext): void;
+    };
+};
+
 export declare const CurrentPage: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
 
 export declare const CurrentZoom: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
@@ -190,6 +255,19 @@ export declare const CustomLayer: MemoExoticComponent<({ children }: {
 children: (pageNumber: number) => JSX_2.Element;
 }) => JSX_2.Element>;
 
+declare interface DarkModeColors {
+    /** Replaces the white paper background. Any CSS hex/rgb color. */
+    background?: string;
+    /** Replaces black text and line art. Any CSS hex/rgb color. */
+    foreground?: string;
+}
+export { DarkModeColors }
+export { DarkModeColors as DarkModeColors_alias_1 }
+
+declare const DEFAULT_DARK_MODE_COLORS: Required<DarkModeColors>;
+export { DEFAULT_DARK_MODE_COLORS }
+export { DEFAULT_DARK_MODE_COLORS as DEFAULT_DARK_MODE_COLORS_alias_1 }
+
 export declare const ensureAnnotationLayerStyles: () => void;
 
 export declare const firstMemo: <T>(first: boolean, memo: unknown, initializer: () => T) => T;
@@ -238,6 +316,9 @@ export declare interface InitialPDFState {
     zoom: number;
     isZoomFitWidth?: boolean;
     zoomOptions?: ZoomOptions;
+    colorScheme?: ColorScheme;
+    darkModeColors?: DarkModeColors;
+    renderColorMapRef?: RenderColorMapRef;
 }
 
 export declare class LinkService {
@@ -349,6 +430,14 @@ declare interface PDFState {
     renderedPages: Record<number, true>;
     markPageRendered: (pageNumber: number) => void;
     unmarkPageRendered: (pageNumber: number) => void;
+    colorScheme: ColorScheme;
+    darkModeColors: Required<DarkModeColors>;
+    setColorScheme: (colorScheme: ColorScheme, colors?: DarkModeColors) => void;
+    /**
+     * Shared with the document's pdf.js CanvasFactory so internal scratch
+     * canvases (transparency groups, soft masks, patterns) follow the scheme.
+     */
+    renderColorMapRef: RenderColorMapRef;
 }
 
 export declare const PDFStore: {
@@ -364,6 +453,27 @@ export declare type PDFVirtualizer = Virtualizer<any, any>;
 
 export declare const PreviousPage: () => void;
 
+/**
+ * Removes any recolor wrapper installed on the context. For long-lived
+ * contexts (the visible canvas in the no-buffer fallback, thumbnails) that
+ * are about to render in the light scheme: a still-pending dark render's
+ * deferred restore could otherwise leave its wrapper active across the
+ * scheme switch.
+ */
+export declare function removeContextRecolor(ctx: CanvasRenderingContext2D): void;
+
+/**
+ * Maps a color from the original document to its dark-scheme equivalent.
+ * Unparseable and fully-transparent colors are returned unchanged.
+ */
+declare type RenderColorMap = (color: string) => string;
+export { RenderColorMap }
+export { RenderColorMap as RenderColorMap_alias_1 }
+
+export declare interface RenderColorMapRef {
+    current: RenderColorMap | null;
+}
+
 export declare const Root: ForwardRefExoticComponent<Omit<Omit<HTMLProps<HTMLDivElement>, "onError"> & usePDFDocumentParams & {
 loader?: ReactNode;
 }, "ref"> & RefAttributes<unknown>>;
@@ -462,7 +572,7 @@ declare const usePdf: <T>(selector: (state: PDFState) => T) => T;
 export { usePdf }
 export { usePdf as usePdf_alias_1 }
 
-export declare const usePDFDocumentContext: ({ onDocumentLoad, onError, source, initialRotation, isZoomFitWidth, zoom, zoomOptions, documentOptions, }: usePDFDocumentParams) => {
+export declare const usePDFDocumentContext: ({ onDocumentLoad, onError, source, initialRotation, isZoomFitWidth, zoom, zoomOptions, documentOptions, colorScheme, darkModeColors, }: usePDFDocumentParams) => {
     initialState: InitialPDFState | null | undefined;
 };
 
@@ -501,6 +611,19 @@ export declare interface usePDFDocumentParams {
      * Must be a stable reference (module-level constant or useMemo) to avoid reloading the document.
      */
     documentOptions?: Partial<DocumentInitParameters>;
+    /**
+     * Initial color scheme for page rendering. "dark" recolors the document at
+     * render time (native dark mode): perceived lightness is flipped onto the
+     * darkModeColors ramp while hue is preserved, and images keep their
+     * original pixels. Changing the prop after mount updates the scheme; the
+     * runtime equivalent is `usePdf((s) => s.setColorScheme)`.
+     */
+    colorScheme?: ColorScheme;
+    /**
+     * Palette for the dark scheme: `background` replaces white paper,
+     * `foreground` replaces black text. Defaults to #141210 / #eae6e0.
+     */
+    darkModeColors?: DarkModeColors;
 }
 
 export declare const usePdfJump: () => {

package/dist/index.d.ts

@@ -42,3 +42,8 @@ export { useSelectionDimensions } from './_tsup-dts-rollup.js';
 export { ColoredHighlight } from './_tsup-dts-rollup.js';
 export { HighlightRect } from './_tsup-dts-rollup.js';
 export { usePdf } from './_tsup-dts-rollup.js';
+export { ColorScheme } from './_tsup-dts-rollup.js';
+export { createDarkModeColorMap } from './_tsup-dts-rollup.js';
+export { DarkModeColors } from './_tsup-dts-rollup.js';
+export { DEFAULT_DARK_MODE_COLORS } from './_tsup-dts-rollup.js';
+export { RenderColorMap } from './_tsup-dts-rollup.js';

package/dist/index.js

@@ -15,6 +15,209 @@ var clamp = (value, minimum, maximum) => {
   return Math.min(Math.max(value, minimum), maximum);
 };
 
+// src/lib/dark-mode.ts
+var DEFAULT_DARK_MODE_COLORS = {
+  background: "#141210",
+  foreground: "#eae6e0"
+};
+var NAMED_COLORS = {
+  white: [1, 1, 1, 1],
+  black: [0, 0, 0, 1],
+  transparent: [0, 0, 0, 0]
+};
+function clamp01(value) {
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function parseColor(input) {
+  const str = input.trim().toLowerCase();
+  const named = Object.hasOwn(NAMED_COLORS, str) ? NAMED_COLORS[str] : void 0;
+  if (named) return named;
+  if (str.startsWith("#")) {
+    const hex = str.slice(1);
+    if (!/^[0-9a-f]{3,8}$/.test(hex)) return null;
+    if (hex.length === 3 || hex.length === 4) {
+      const r2 = Number.parseInt(hex[0], 16) / 15;
+      const g = Number.parseInt(hex[1], 16) / 15;
+      const b = Number.parseInt(hex[2], 16) / 15;
+      const a = hex.length === 4 ? Number.parseInt(hex[3], 16) / 15 : 1;
+      return [r2, g, b, a];
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      const r2 = Number.parseInt(hex.slice(0, 2), 16) / 255;
+      const g = Number.parseInt(hex.slice(2, 4), 16) / 255;
+      const b = Number.parseInt(hex.slice(4, 6), 16) / 255;
+      const a = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1;
+      return [r2, g, b, a];
+    }
+    return null;
+  }
+  const fn = /^rgba?\(([^)]+)\)$/.exec(str);
+  if (fn) {
+    const parts = fn[1].split(/[,\s/]+/).filter(Boolean);
+    if (parts.length < 3) return null;
+    const channel = (part) => part.endsWith("%") ? Number.parseFloat(part) / 100 : Number.parseFloat(part) / 255;
+    const alpha = (part) => part.endsWith("%") ? Number.parseFloat(part) / 100 : Number.parseFloat(part);
+    const r2 = channel(parts[0]);
+    const g = channel(parts[1]);
+    const b = channel(parts[2]);
+    const a = parts[3] !== void 0 ? alpha(parts[3]) : 1;
+    if (Number.isNaN(r2) || Number.isNaN(g) || Number.isNaN(b) || Number.isNaN(a))
+      return null;
+    return [clamp01(r2), clamp01(g), clamp01(b), clamp01(a)];
+  }
+  const normalized = normalizeCssColor(str);
+  if (normalized !== null && normalized !== str) return parseColor(normalized);
+  return null;
+}
+var normalizeCtx;
+function normalizeCssColor(input) {
+  if (normalizeCtx === void 0) {
+    normalizeCtx = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d", {
+      willReadFrequently: true
+    });
+  }
+  const ctx = normalizeCtx;
+  if (!ctx) return null;
+  ctx.fillStyle = "#000000";
+  ctx.fillStyle = input;
+  const first = ctx.fillStyle;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = input;
+  return first === ctx.fillStyle ? first : null;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function linearToSrgb(c) {
+  return c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+}
+function rgbToOklab(r2, g, b) {
+  const lr = srgbToLinear(r2);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const l = Math.cbrt(
+    0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb
+  );
+  const m = Math.cbrt(
+    0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb
+  );
+  const s = Math.cbrt(
+    0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb
+  );
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToLinearRgb(L, a, b) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var GAMUT_EPSILON = 5e-4;
+function oklabToSrgbExact(L, a, b) {
+  const [lr, lg, lb] = oklabToLinearRgb(L, a, b);
+  if (lr < -GAMUT_EPSILON || lr > 1 + GAMUT_EPSILON || lg < -GAMUT_EPSILON || lg > 1 + GAMUT_EPSILON || lb < -GAMUT_EPSILON || lb > 1 + GAMUT_EPSILON) {
+    return null;
+  }
+  return [
+    linearToSrgb(clamp01(lr)),
+    linearToSrgb(clamp01(lg)),
+    linearToSrgb(clamp01(lb))
+  ];
+}
+function oklabToSrgbGamutMapped(L, a, b) {
+  const exact = oklabToSrgbExact(L, a, b);
+  if (exact) return exact;
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 12; i++) {
+    const mid = (lo + hi) / 2;
+    if (oklabToSrgbExact(L, a * mid, b * mid)) lo = mid;
+    else hi = mid;
+  }
+  const [lr, lg, lb] = oklabToLinearRgb(L, a * lo, b * lo);
+  return [
+    linearToSrgb(clamp01(lr)),
+    linearToSrgb(clamp01(lg)),
+    linearToSrgb(clamp01(lb))
+  ];
+}
+function toHexByte(channel) {
+  return Math.round(clamp01(channel) * 255).toString(16).padStart(2, "0");
+}
+function toCssColor(r2, g, b, a) {
+  const rgb = `#${toHexByte(r2)}${toHexByte(g)}${toHexByte(b)}`;
+  return a >= 1 ? rgb : `${rgb}${toHexByte(a)}`;
+}
+var NEUTRAL_CHROMA_THRESHOLD = 0.04;
+var COLOR_CACHE_MAX = 4096;
+var mapInstances = /* @__PURE__ */ new Map();
+function createDarkModeColorMap(colors) {
+  const background = colors?.background ?? DEFAULT_DARK_MODE_COLORS.background;
+  const foreground = colors?.foreground ?? DEFAULT_DARK_MODE_COLORS.foreground;
+  const instanceKey = `${background}|${foreground}`;
+  const existing = mapInstances.get(instanceKey);
+  if (existing) {
+    mapInstances.delete(instanceKey);
+    mapInstances.set(instanceKey, existing);
+    return existing;
+  }
+  const bgRgba = parseColor(background) ?? parseColor(DEFAULT_DARK_MODE_COLORS.background);
+  const fgRgba = parseColor(foreground) ?? parseColor(DEFAULT_DARK_MODE_COLORS.foreground);
+  const bgLab = rgbToOklab(bgRgba[0], bgRgba[1], bgRgba[2]);
+  const fgLab = rgbToOklab(fgRgba[0], fgRgba[1], fgRgba[2]);
+  const cache = /* @__PURE__ */ new Map();
+  const backgroundCss = toCssColor(bgRgba[0], bgRgba[1], bgRgba[2], 1);
+  const foregroundCss = toCssColor(fgRgba[0], fgRgba[1], fgRgba[2], 1);
+  const seedPoles = () => {
+    for (const white of ["#ffffff", "#fff", "white"])
+      cache.set(white, backgroundCss);
+    for (const black of ["#000000", "#000", "black"])
+      cache.set(black, foregroundCss);
+  };
+  seedPoles();
+  const transform = (input) => {
+    const parsed = parseColor(input);
+    if (!parsed || parsed[3] === 0) return input;
+    const [r2, g, b, alpha] = parsed;
+    const [, labA, labB] = rgbToOklab(r2, g, b);
+    const luma = 0.2126 * r2 + 0.7152 * g + 0.0722 * b;
+    const rampL = fgLab[0] + (bgLab[0] - fgLab[0]) * luma;
+    const rampA = fgLab[1] + (bgLab[1] - fgLab[1]) * luma;
+    const rampB = fgLab[2] + (bgLab[2] - fgLab[2]) * luma;
+    const chroma = Math.hypot(labA, labB);
+    const hueWeight = Math.min(1, chroma / NEUTRAL_CHROMA_THRESHOLD);
+    const outA = rampA + (labA - rampA) * hueWeight;
+    const outB = rampB + (labB - rampB) * hueWeight;
+    const [sr, sg, sb] = oklabToSrgbGamutMapped(rampL, outA, outB);
+    return toCssColor(sr, sg, sb, alpha);
+  };
+  const map = (input) => {
+    const hit = cache.get(input);
+    if (hit !== void 0) return hit;
+    const out = transform(input);
+    if (cache.size >= COLOR_CACHE_MAX) {
+      cache.clear();
+      seedPoles();
+    }
+    cache.set(input, out);
+    return out;
+  };
+  if (mapInstances.size >= 16) {
+    const oldest = mapInstances.keys().next().value;
+    if (oldest !== void 0) mapInstances.delete(oldest);
+  }
+  mapInstances.set(instanceKey, map);
+  return map;
+}
+
 // src/lib/zoom.ts
 var getFitWidthZoom = (containerWidth, viewports, zoomOptions) => {
   const { minZoom, maxZoom } = zoomOptions;
@@ -39,6 +242,15 @@ var createZustandContext = (getStore) => {
 // src/internal.ts
 var PDFStore = createZustandContext(
   (initialState) => {
+    const initialColorScheme = initialState.colorScheme ?? "light";
+    const initialDarkModeColors = {
+      ...DEFAULT_DARK_MODE_COLORS,
+      ...initialState.darkModeColors
+    };
+    const renderColorMapRef = initialState.renderColorMapRef ?? {
+      current: null
+    };
+    renderColorMapRef.current = initialColorScheme === "dark" ? createDarkModeColorMap(initialDarkModeColors) : null;
     return createStore((set, get) => ({
       pdfDocumentProxy: initialState.pdfDocumentProxy,
       zoom: initialState.zoom,
@@ -131,6 +343,21 @@ var PDFStore = createZustandContext(
           (rect) => rect.uuid !== uuid
         )
       })),
+      colorScheme: initialColorScheme,
+      darkModeColors: initialDarkModeColors,
+      renderColorMapRef,
+      setColorScheme: (colorScheme, colors) => {
+        const prev = get();
+        const darkModeColors = {
+          background: colors?.background ?? prev.darkModeColors.background,
+          foreground: colors?.foreground ?? prev.darkModeColors.foreground
+        };
+        if (prev.colorScheme === colorScheme && prev.darkModeColors.background === darkModeColors.background && prev.darkModeColors.foreground === darkModeColors.foreground) {
+          return;
+        }
+        prev.renderColorMapRef.current = colorScheme === "dark" ? createDarkModeColorMap(darkModeColors) : null;
+        set({ colorScheme, darkModeColors });
+      },
       renderedPages: {},
       markPageRendered: (pageNumber) => {
         const current = get().renderedPages;
@@ -1165,6 +1392,129 @@ function clampScaleForPage(targetScale, pageWidth, pageHeight) {
   );
   return Math.max(safeScale, 0);
 }
+
+// src/lib/recolor-context.ts
+var RECOLOR_CLEANUP = Symbol("lectorRecolorCleanup");
+var RECOLOR_PAINTED = Symbol("lectorRecolorPainted");
+var FILL_METHODS = ["fill", "fillRect", "fillText"];
+var STROKE_METHODS = ["stroke", "strokeRect", "strokeText"];
+var GRADIENT_METHODS = [
+  "createLinearGradient",
+  "createRadialGradient"
+];
+function ntscLuma(r2, g, b) {
+  return 0.3 * r2 + 0.59 * g + 0.11 * b;
+}
+function parseHexLuma(color) {
+  if (!/^#[0-9a-f]{6}$/i.test(color)) return null;
+  return ntscLuma(
+    Number.parseInt(color.slice(1, 3), 16),
+    Number.parseInt(color.slice(3, 5), 16),
+    Number.parseInt(color.slice(5, 7), 16)
+  );
+}
+function correctLuminosityMask(source, mappedWhiteLuma, mappedBlackLuma) {
+  if (typeof document === "undefined") return null;
+  if (!(typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) && !(typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas)) {
+    return null;
+  }
+  const width = source.width;
+  const height = source.height;
+  if (!width || !height) return null;
+  const span = mappedWhiteLuma - mappedBlackLuma;
+  if (Math.abs(span) < 1) return null;
+  const tmp = document.createElement("canvas");
+  tmp.width = width;
+  tmp.height = height;
+  const tmpCtx = tmp.getContext("2d", { willReadFrequently: true });
+  if (!tmpCtx) return null;
+  tmpCtx.drawImage(source, 0, 0);
+  let image;
+  try {
+    image = tmpCtx.getImageData(0, 0, width, height);
+  } catch {
+    return null;
+  }
+  const data = image.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma = ntscLuma(data[i], data[i + 1], data[i + 2]);
+    const t = (luma - mappedBlackLuma) / span;
+    const gray = t <= 0 ? 0 : t >= 1 ? 255 : Math.round(t * 255);
+    data[i] = data[i + 1] = data[i + 2] = gray;
+  }
+  tmpCtx.putImageData(image, 0, 0);
+  return tmp;
+}
+function applyContextRecolor(ctx, map) {
+  const target = ctx;
+  target[RECOLOR_CLEANUP]?.();
+  const mappedWhiteLuma = parseHexLuma(map("#ffffff"));
+  const mappedBlackLuma = parseHexLuma(map("#000000"));
+  const withMaskCorrection = (original) => function(...args) {
+    if (mappedWhiteLuma !== null && mappedBlackLuma !== null && this.globalCompositeOperation === "destination-in" && typeof this.filter === "string" && this.filter.includes("luminosity")) {
+      const source = args[0];
+      const sourcePainted = (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas) && source.getContext("2d")?.[RECOLOR_PAINTED] === true;
+      const corrected = sourcePainted ? correctLuminosityMask(source, mappedWhiteLuma, mappedBlackLuma) : null;
+      if (corrected) {
+        const next = [corrected, ...args.slice(1)];
+        return original.apply(this, next);
+      }
+    }
+    return original.apply(this, args);
+  };
+  const withMappedStyle = (original, styleProp) => function(...args) {
+    const style = this[styleProp];
+    if (typeof style === "string") {
+      const mapped = map(style);
+      if (mapped !== style) {
+        this[RECOLOR_PAINTED] = true;
+        this[styleProp] = mapped;
+        try {
+          return original.apply(this, args);
+        } finally {
+          this[styleProp] = style;
+        }
+      }
+    }
+    return original.apply(this, args);
+  };
+  const withMappedStops = (original) => function(...args) {
+    const gradient = original.apply(this, args);
+    const addColorStop = gradient.addColorStop.bind(gradient);
+    const context = this;
+    gradient.addColorStop = (offset3, color) => {
+      const mapped = map(color);
+      if (mapped !== color) context[RECOLOR_PAINTED] = true;
+      addColorStop(offset3, mapped);
+    };
+    return gradient;
+  };
+  const record = target;
+  for (const name of FILL_METHODS)
+    record[name] = withMappedStyle(target[name], "fillStyle");
+  for (const name of STROKE_METHODS)
+    record[name] = withMappedStyle(target[name], "strokeStyle");
+  for (const name of GRADIENT_METHODS)
+    record[name] = withMappedStops(target[name]);
+  record.drawImage = withMaskCorrection(target.drawImage);
+  const cleanup = () => {
+    if (target[RECOLOR_CLEANUP] !== cleanup) return;
+    for (const name of [
+      ...FILL_METHODS,
+      ...STROKE_METHODS,
+      ...GRADIENT_METHODS,
+      "drawImage"
+    ])
+      delete record[name];
+    delete target[RECOLOR_CLEANUP];
+    delete target[RECOLOR_PAINTED];
+  };
+  target[RECOLOR_CLEANUP] = cleanup;
+  return cleanup;
+}
+function removeContextRecolor(ctx) {
+  ctx[RECOLOR_CLEANUP]?.();
+}
 var useDpr = () => {
   const [dpr, setDPR] = useState(
     typeof window === "undefined" ? 1 : Math.min(window.devicePixelRatio, 2)
@@ -1208,16 +1558,16 @@ function clearBitmapCache(documentId) {
     cacheEntries.splice(i, 1);
   }
 }
-function cacheKey(scale, background) {
-  const bg = background ?? "white";
+function cacheKey(scale, background, recolorKey) {
+  const bg = `${background ?? "white"}|${recolorKey ?? ""}`;
   let hash = Math.round(scale * 1e4);
   for (let i = 0; i < bg.length; i++) {
     hash = hash * 31 + bg.charCodeAt(i) | 0;
   }
   return hash;
 }
-function getCachedBitmap(proxy, scale, background) {
-  const key = cacheKey(scale, background);
+function getCachedBitmap(proxy, scale, background, recolorKey) {
+  const key = cacheKey(scale, background, recolorKey);
   const bitmap = canvasBitmapCache.get(proxy)?.get(key);
   if (!bitmap) return null;
   const idx = cacheEntries.findIndex((e) => e.proxy === proxy && e.key === key);
@@ -1227,8 +1577,8 @@ function getCachedBitmap(proxy, scale, background) {
   }
   return bitmap;
 }
-function setCachedBitmap(docId, proxy, scale, background, bitmap) {
-  const key = cacheKey(scale, background);
+function setCachedBitmap(docId, proxy, scale, background, recolorKey, bitmap) {
+  const key = cacheKey(scale, background, recolorKey);
   let map = canvasBitmapCache.get(proxy);
   if (!map) {
     map = /* @__PURE__ */ new Map();
@@ -1255,8 +1605,9 @@ function setCachedBitmap(docId, proxy, scale, background, bitmap) {
 }
 var useCanvasLayer = ({ background }) => {
   const canvasRef = useRef(null);
-  const hasContentRef = useRef(false);
+  const paintedKeyRef = useRef(null);
   const pageNumber = usePDFPageNumber();
+  const store = PDFStore.useContext();
   const dpr = useDpr();
   const bouncyZoom = usePdf((state) => state.zoom);
   const isResizing = usePdf((state) => state.isResizing);
@@ -1264,6 +1615,10 @@ var useCanvasLayer = ({ background }) => {
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const markPageRendered = usePdf((state) => state.markPageRendered);
   const unmarkPageRendered = usePdf((state) => state.unmarkPageRendered);
+  const colorScheme = usePdf((state) => state.colorScheme);
+  const darkModeColors = usePdf((state) => state.darkModeColors);
+  const recolor = colorScheme === "dark" ? createDarkModeColorMap(darkModeColors) : null;
+  const recolorKey = recolor ? `dark:${darkModeColors.background},${darkModeColors.foreground}` : void 0;
   const [zoom] = useDebounce(bouncyZoom, 100);
   useLayoutEffect(() => {
     if (!canvasRef.current) return;
@@ -1271,13 +1626,14 @@ var useCanvasLayer = ({ background }) => {
     const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
     const pageWidth = baseViewport.width;
     const pageHeight = baseViewport.height;
-    if (isResizing && hasContentRef.current) {
+    const contentKey = `${background ?? "white"}|${recolorKey ?? ""}`;
+    if (isResizing && paintedKeyRef.current === contentKey) {
       baseCanvas.style.visibility = "";
       baseCanvas.style.width = `${pageWidth}px`;
       baseCanvas.style.height = `${pageHeight}px`;
       return;
     }
-    hasContentRef.current = false;
+    paintedKeyRef.current = null;
     const targetBaseScale = dpr * Math.min(zoom, 1);
     const baseScale = clampScaleForPage(targetBaseScale, pageWidth, pageHeight);
     baseCanvas.width = Math.floor(pageWidth * baseScale);
@@ -1290,15 +1646,20 @@ var useCanvasLayer = ({ background }) => {
     baseCanvas.style.transform = "translate(0px, 0px)";
     baseCanvas.style.zIndex = "0";
     baseCanvas.style.pointerEvents = "none";
-    baseCanvas.style.backgroundColor = background ?? "white";
+    baseCanvas.style.backgroundColor = recolor ? recolor(background ?? "#ffffff") : background ?? "white";
     baseCanvas.style.visibility = "";
     const context = baseCanvas.getContext("2d");
     if (!context) return;
-    const cached = getCachedBitmap(pdfPageProxy, baseScale, background);
+    const cached = getCachedBitmap(
+      pdfPageProxy,
+      baseScale,
+      background,
+      recolorKey
+    );
     if (cached) {
       context.drawImage(cached, 0, 0);
       markPageRendered(pageNumber);
-      hasContentRef.current = true;
+      paintedKeyRef.current = contentKey;
       return;
     }
     context.setTransform(1, 0, 0, 1, 0, 0);
@@ -1313,28 +1674,48 @@ var useCanvasLayer = ({ background }) => {
     const useBuffer = bufferCtx !== null;
     const renderCanvas = useBuffer ? buffer : baseCanvas;
     const renderCtx = bufferCtx ?? context;
-    const renderingTask = pdfPageProxy.render({
-      canvas: renderCanvas,
-      canvasContext: renderCtx,
-      viewport,
-      background
-    });
+    let restoreRecolor = null;
+    if (recolor) {
+      restoreRecolor = applyContextRecolor(renderCtx, recolor);
+    } else {
+      removeContextRecolor(renderCtx);
+    }
+    let renderingTask;
+    try {
+      renderingTask = pdfPageProxy.render({
+        canvas: renderCanvas,
+        canvasContext: renderCtx,
+        viewport,
+        background
+      });
+    } catch (error) {
+      restoreRecolor?.();
+      throw error;
+    }
     const releaseBuffer = () => {
       buffer.width = 0;
       buffer.height = 0;
     };
-    renderingTask.promise.then(() => {
+    renderingTask.promise.finally(() => {
+      restoreRecolor?.();
+    }).then(() => {
       if (cancelled) {
         releaseBuffer();
         return;
       }
+      const state = store.getState();
+      const currentRecolorKey = state.colorScheme === "dark" ? `dark:${state.darkModeColors.background},${state.darkModeColors.foreground}` : void 0;
+      if (currentRecolorKey !== recolorKey) {
+        releaseBuffer();
+        return;
+      }
       if (useBuffer) {
         context.clearRect(0, 0, baseCanvas.width, baseCanvas.height);
         context.drawImage(buffer, 0, 0);
       }
       baseCanvas.style.visibility = "";
       markPageRendered(pageNumber);
-      hasContentRef.current = true;
+      paintedKeyRef.current = contentKey;
       if (typeof createImageBitmap !== "undefined") {
         createImageBitmap(renderCanvas).then((bitmap) => {
           if (cancelled) {
@@ -1346,6 +1727,7 @@ var useCanvasLayer = ({ background }) => {
             pdfPageProxy,
             baseScale,
             background,
+            recolorKey,
             bitmap
           );
         }).catch(() => {
@@ -1372,7 +1754,10 @@ var useCanvasLayer = ({ background }) => {
     isResizing,
     pageNumber,
     markPageRendered,
-    docId
+    docId,
+    recolor,
+    recolorKey,
+    store
   ]);
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -1454,6 +1839,7 @@ var subscribeToViewportInvalidation = (viewport, callback) => {
 
 // src/hooks/layers/useDetailCanvasLayer.tsx
 var DETAIL_RENDER_IDLE_MS = 80;
+var ZOOM_SETTLE_MS = 250;
 var useDetailCanvasLayer = ({
   background,
   baseCanvasRef
@@ -1467,7 +1853,20 @@ var useDetailCanvasLayer = ({
   const isPinching = usePdf((state) => state.isPinching);
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const viewportRef = usePdf((state) => state.viewportRef);
+  const colorScheme = usePdf((state) => state.colorScheme);
+  const darkModeColors = usePdf((state) => state.darkModeColors);
+  const recolor = colorScheme === "dark" ? createDarkModeColorMap(darkModeColors) : null;
+  const recolorKey = recolor ? `dark:${darkModeColors.background},${darkModeColors.foreground}` : "light";
+  const paintedKeyRef = useRef(null);
   const [zoom] = useDebounce(bouncyZoom, 200);
+  const lastZoomChangeRef = useRef(
+    store.getState().isPinching ? performance.now() : 0
+  );
+  const prevBouncyZoomRef = useRef(bouncyZoom);
+  if (prevBouncyZoomRef.current !== bouncyZoom) {
+    prevBouncyZoomRef.current = bouncyZoom;
+    lastZoomChangeRef.current = performance.now();
+  }
   const pageDimsRef = useRef(null);
   if (!pageDimsRef.current || pageDimsRef.current.proxy !== pdfPageProxy) {
     const vp = pdfPageProxy.getViewport({ scale: 1 });
@@ -1489,7 +1888,8 @@ var useDetailCanvasLayer = ({
     }
     let renderingTask = null;
     let renderTimeoutId = null;
-    const bgColor = background ?? "white";
+    const bgColor = recolor ? recolor(background ?? "#ffffff") : background ?? "white";
+    const contentKey = `${background ?? "white"}|${recolorKey}`;
     const detailBaseStyle = `position:absolute;top:0;left:0;pointer-events:none;z-index:1;background-color:${bgColor}`;
     const hideDetailCanvas = () => {
       renderingTask?.cancel();
@@ -1502,6 +1902,10 @@ var useDetailCanvasLayer = ({
         scheduleRender(160);
         return;
       }
+      if (store.getState().isPinching || performance.now() - lastZoomChangeRef.current < ZOOM_SETTLE_MS) {
+        scheduleRender(160);
+        return;
+      }
       const pageContainer = baseCanvasRef.current?.parentElement ?? null;
       if (!pageContainer) {
         hideDetailCanvas();
@@ -1569,6 +1973,7 @@ var useDetailCanvasLayer = ({
       const detailViewport = pdfPageProxy.getViewport({
         scale: effectiveScale
       });
+      if (recolor) applyContextRecolor(bufferCtx, recolor);
       const currentRenderingTask = pdfPageProxy.render({
         canvas: buffer,
         canvasContext: bufferCtx,
@@ -1579,6 +1984,9 @@ var useDetailCanvasLayer = ({
       renderingTask = currentRenderingTask;
       currentRenderingTask.promise.then(() => {
         if (renderingTask !== currentRenderingTask) return;
+        const state = store.getState();
+        const currentRecolorKey = state.colorScheme === "dark" ? `dark:${state.darkModeColors.background},${state.darkModeColors.foreground}` : "light";
+        if (currentRecolorKey !== recolorKey) return;
         detailCanvas.width = actualWidth;
         detailCanvas.height = actualHeight;
         detailCanvas.style.cssText = `${detailBaseStyle};display:block;opacity:1;width:${visibleWidth * zoom}px;height:${visibleHeight * zoom}px;transform-origin:center center;transform:translate(${visibleLeft * zoom}px,${visibleTop * zoom}px)`;
@@ -1587,6 +1995,7 @@ var useDetailCanvasLayer = ({
         if (ctx) {
           ctx.drawImage(buffer, 0, 0);
         }
+        paintedKeyRef.current = contentKey;
       }).catch((error) => {
         if (error.name === "RenderingCancelledException") {
           return;
@@ -1617,6 +2026,10 @@ var useDetailCanvasLayer = ({
     if (zoom <= 1 || isPinching) {
       hideDetailCanvas();
     } else {
+      if (paintedKeyRef.current !== null && paintedKeyRef.current !== contentKey) {
+        hideDetailCanvas();
+        paintedKeyRef.current = null;
+      }
       scheduleRender(0);
     }
     return () => {
@@ -1634,7 +2047,9 @@ var useDetailCanvasLayer = ({
     dpr,
     viewportRef,
     baseCanvasRef,
-    store
+    store,
+    recolor,
+    recolorKey
   ]);
   useEffect(() => {
     const canvas = detailCanvasRef.current;
@@ -2353,8 +2768,11 @@ var ColoredHighlightComponent = ({
   const deleteColoredHighlight = usePdf(
     (state) => state.deleteColoredHighlight
   );
+  const colorScheme = usePdf((state) => state.colorScheme);
+  const darkModeColors = usePdf((state) => state.darkModeColors);
   const [showButton, setShowButton] = useState(false);
   const pageNumber = usePDFPageNumber();
+  const highlightColor = colorScheme === "dark" ? createDarkModeColorMap(darkModeColors)(selection.color) : selection.color;
   const pageRectangles = useMemo(
     () => selection.rectangles.filter((r2) => r2.pageNumber === pageNumber),
     [selection.rectangles, pageNumber]
@@ -2377,11 +2795,10 @@ var ColoredHighlightComponent = ({
           width: rect.width,
           cursor: "pointer",
           zIndex: 30,
-          backgroundColor: selection.color,
-          // mixBlendMode: "lighten", // changes the color of the text
-          mixBlendMode: "darken",
-          // best results
-          // mixBlendMode: "multiply", // works but coloring has some inconsistencies
+          backgroundColor: highlightColor,
+          // "darken" keeps dark text legible on a light page; on a dark
+          // page the equivalent is "lighten" (keeps light text legible).
+          mixBlendMode: colorScheme === "dark" ? "lighten" : "darken",
           borderRadius: "0.2rem"
         }
       },
@@ -2676,6 +3093,7 @@ var useTextLayer = () => {
   const pageNumber = usePDFPageNumber();
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const viewportRef = usePdf((state) => state.viewportRef);
+  const store = PDFStore.useContext();
   useEffect(() => {
     const textContainer = textContainerRef.current;
     if (!textContainer) {
@@ -2780,11 +3198,22 @@ var useTextLayer = () => {
     const show = () => {
       textContainer.style.visibility = "";
     };
-    const onScroll = () => {
+    const restoreWhenSettled = () => {
+      settleTimer = null;
+      if (store.getState().isPinching) {
+        settleTimer = setTimeout(restoreWhenSettled, TEXT_SCROLL_SETTLE_MS);
+        return;
+      }
+      show();
+    };
+    const hideAndDebounce = () => {
       if (selecting) return;
       textContainer.style.visibility = "hidden";
       if (settleTimer) clearTimeout(settleTimer);
-      settleTimer = setTimeout(show, TEXT_SCROLL_SETTLE_MS);
+      settleTimer = setTimeout(restoreWhenSettled, TEXT_SCROLL_SETTLE_MS);
+    };
+    const onScroll = () => {
+      hideAndDebounce();
     };
     const onPointerDown = () => {
       pointerDown = true;
@@ -2816,6 +3245,19 @@ var useTextLayer = () => {
       unsubscribe = subscribeToViewportInvalidation(scrollViewport, onScroll);
     };
     attachScrollSubscription();
+    const initialState = store.getState();
+    let prevZoom = initialState.zoom;
+    let prevPinching = initialState.isPinching;
+    if (prevPinching) hideAndDebounce();
+    const unsubscribeStore = store.subscribe(
+      (state) => {
+        const zoomChanged = state.zoom !== prevZoom;
+        const pinchStarted = state.isPinching && !prevPinching;
+        prevZoom = state.zoom;
+        prevPinching = state.isPinching;
+        if (zoomChanged || pinchStarted) hideAndDebounce();
+      }
+    );
     document.addEventListener("pointerdown", onPointerDown, true);
     document.addEventListener("pointerup", clearPointer, true);
     document.addEventListener("pointercancel", clearPointer, true);
@@ -2824,6 +3266,7 @@ var useTextLayer = () => {
     return () => {
       if (attachRaf !== null) cancelAnimationFrame(attachRaf);
       unsubscribe?.();
+      unsubscribeStore();
       document.removeEventListener("pointerdown", onPointerDown, true);
       document.removeEventListener("pointerup", clearPointer, true);
       document.removeEventListener("pointercancel", clearPointer, true);
@@ -2832,7 +3275,7 @@ var useTextLayer = () => {
       if (settleTimer) clearTimeout(settleTimer);
       show();
     };
-  }, [viewportRef]);
+  }, [viewportRef, store]);
   return {
     textContainerRef,
     pageNumber: pdfPageProxy.pageNumber
@@ -3038,6 +3481,9 @@ var Page = memo(
   }) => {
     const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
     const viewport = usePdf((state) => state.viewports[pageNumber - 1]);
+    const colorScheme = usePdf((state) => state.colorScheme);
+    const darkModeColors = usePdf((state) => state.darkModeColors);
+    const pageBackground = colorScheme === "dark" ? createDarkModeColorMap(darkModeColors)("#ffffff") : "white";
     const width = viewport?.width ?? (pdfPageProxy.view[2] ?? 0) - (pdfPageProxy.view[0] ?? 0);
     const height = viewport?.height ?? (pdfPageProxy.view[3] ?? 0) - (pdfPageProxy.view[1] ?? 0);
     return /* @__PURE__ */ jsx(PDFPageNumberContext.Provider, { value: pdfPageProxy.pageNumber, children: /* @__PURE__ */ jsx(
@@ -3052,7 +3498,7 @@ var Page = memo(
             style: {
               "--scale-factor": 1,
               "--total-scale-factor": 1,
-              backgroundColor: "white",
+              backgroundColor: pageBackground,
               position: "relative",
               width,
               height,
@@ -5595,8 +6041,63 @@ var getDefaultPdfJsAssetUrls = (version) => {
   };
 };
 
+// src/lib/recolor-canvas-factory.ts
+function createRecolorCanvasFactory(mapRef) {
+  return class RecolorCanvasFactory {
+    #document;
+    #enableHWA;
+    constructor({
+      ownerDocument = globalThis.document,
+      enableHWA = false
+    } = {}) {
+      this.#document = ownerDocument;
+      this.#enableHWA = enableHWA;
+    }
+    create(width, height) {
+      if (width <= 0 || height <= 0) {
+        throw new Error("Invalid canvas size");
+      }
+      const canvas = this.#document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const context = canvas.getContext("2d", {
+        willReadFrequently: !this.#enableHWA
+      });
+      const map = mapRef.current;
+      if (context && map) {
+        applyContextRecolor(context, map);
+      }
+      return { canvas, context };
+    }
+    reset(canvasAndContext, width, height) {
+      if (!canvasAndContext.canvas) {
+        throw new Error("Canvas is not specified");
+      }
+      if (width <= 0 || height <= 0) {
+        throw new Error("Invalid canvas size");
+      }
+      canvasAndContext.canvas.width = width;
+      canvasAndContext.canvas.height = height;
+      if (canvasAndContext.context) {
+        const map = mapRef.current;
+        if (map) applyContextRecolor(canvasAndContext.context, map);
+        else removeContextRecolor(canvasAndContext.context);
+      }
+    }
+    destroy(canvasAndContext) {
+      if (!canvasAndContext.canvas) {
+        throw new Error("Canvas is not specified");
+      }
+      canvasAndContext.canvas.width = 0;
+      canvasAndContext.canvas.height = 0;
+      canvasAndContext.canvas = null;
+      canvasAndContext.context = null;
+    }
+  };
+}
+
 // src/hooks/document/document.ts
-function buildDocumentInitParams(source, pdfJsVersion, overrides) {
+function buildDocumentInitParams(source, pdfJsVersion, renderColorMapRef, overrides) {
   let params;
   if (typeof source === "string" || source instanceof URL) {
     params = { url: source };
@@ -5632,7 +6133,12 @@ function buildDocumentInitParams(source, pdfJsVersion, overrides) {
     cMapUrl: assetUrls.cMapUrl,
     cMapPacked: true,
     standardFontDataUrl: assetUrls.standardFontDataUrl,
-    iccUrl: assetUrls.iccUrl
+    iccUrl: assetUrls.iccUrl,
+    // Internal pdf.js scratch canvases (transparency groups, soft masks,
+    // patterns) go through this factory so native dark mode can recolor
+    // content that never touches the context passed to render(). A no-op
+    // while the light scheme is active.
+    CanvasFactory: createRecolorCanvasFactory(renderColorMapRef)
   };
   return { ...defaults, ...params, ...overrides };
 }
@@ -5644,15 +6150,24 @@ var usePDFDocumentContext = ({
   isZoomFitWidth,
   zoom = 1,
   zoomOptions,
-  documentOptions
+  documentOptions,
+  colorScheme,
+  darkModeColors
 }) => {
   const [_, setProgress] = useState(0);
   const [initialState, setInitialState] = useState();
   const [rotation] = useState(initialRotation);
+  const [renderColorMapRef] = useState(() => ({
+    current: null
+  }));
   const documentOptionsRef = useRef(documentOptions);
   documentOptionsRef.current = documentOptions;
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
+  const colorSchemeRef = useRef(colorScheme);
+  colorSchemeRef.current = colorScheme;
+  const darkModeColorsRef = useRef(darkModeColors);
+  darkModeColorsRef.current = darkModeColors;
   useEffect(() => {
     const generateViewports = async (pdf) => {
       const pageProxies = [];
@@ -5680,7 +6195,10 @@ var usePDFDocumentContext = ({
         pageProxies: sortedPageProxies,
         pdfDocumentProxy: pdf,
         zoom,
-        zoomOptions
+        zoomOptions,
+        colorScheme: colorSchemeRef.current,
+        darkModeColors: darkModeColorsRef.current,
+        renderColorMapRef
       }));
     };
     const loadDocument = () => {
@@ -5696,6 +6214,7 @@ var usePDFDocumentContext = ({
           buildDocumentInitParams(
             source,
             version,
+            renderColorMapRef,
             documentOptionsRef.current
           )
         );
@@ -5757,6 +6276,38 @@ var usePDFDocumentContext = ({
     initialState
   };
 };
+var ColorSchemeSync = ({
+  colorScheme,
+  darkModeColors
+}) => {
+  const setColorScheme = usePdf((state) => state.setColorScheme);
+  const storeColorScheme = usePdf((state) => state.colorScheme);
+  const storeBackground = usePdf((state) => state.darkModeColors.background);
+  const storeForeground = usePdf((state) => state.darkModeColors.foreground);
+  const hasPalette = darkModeColors !== void 0;
+  const background = darkModeColors?.background;
+  const foreground = darkModeColors?.foreground;
+  useEffect(() => {
+    if (!colorScheme && !hasPalette) return;
+    setColorScheme(
+      colorScheme ?? storeColorScheme,
+      hasPalette ? {
+        background: background ?? DEFAULT_DARK_MODE_COLORS.background,
+        foreground: foreground ?? DEFAULT_DARK_MODE_COLORS.foreground
+      } : void 0
+    );
+  }, [
+    colorScheme,
+    storeColorScheme,
+    storeBackground,
+    storeForeground,
+    hasPalette,
+    background,
+    foreground,
+    setColorScheme
+  ]);
+  return null;
+};
 var Root = forwardRef(
   ({
     children,
@@ -5768,6 +6319,8 @@ var Root = forwardRef(
     zoom,
     zoomOptions,
     documentOptions,
+    colorScheme,
+    darkModeColors,
     ...props
   }, ref) => {
     const { initialState } = usePDFDocumentContext({
@@ -5777,7 +6330,9 @@ var Root = forwardRef(
       isZoomFitWidth,
       zoom,
       zoomOptions,
-      documentOptions
+      documentOptions,
+      colorScheme,
+      darkModeColors
     });
     const linkService = useCreatePDFLinkService(
       initialState?.pdfDocumentProxy ?? null
@@ -5789,7 +6344,16 @@ var Root = forwardRef(
         clearBitmapCache(documentId);
       };
     }, [documentId]);
-    return /* @__PURE__ */ jsx(Primitive.div, { ref, ...props, children: initialState ? /* @__PURE__ */ jsx(PDFStore.Provider, { initialValue: initialState, children: /* @__PURE__ */ jsx(PDFLinkServiceContext.Provider, { value: linkService, children }) }) : loader ?? "Loading..." });
+    return /* @__PURE__ */ jsx(Primitive.div, { ref, ...props, children: initialState ? /* @__PURE__ */ jsxs(PDFStore.Provider, { initialValue: initialState, children: [
+      /* @__PURE__ */ jsx(
+        ColorSchemeSync,
+        {
+          colorScheme,
+          darkModeColors
+        }
+      ),
+      /* @__PURE__ */ jsx(PDFLinkServiceContext.Provider, { value: linkService, children })
+    ] }) : loader ?? "Loading..." });
   }
 );
 Root.displayName = "Root";
@@ -5836,6 +6400,9 @@ var useThumbnail = (pageNumber, config = {}) => {
   const { visible } = useVisibility({ elementRef: containerRef });
   const [debouncedVisible] = useDebounce(visible, 50);
   const dpr = useDpr();
+  const colorScheme = usePdf((state) => state.colorScheme);
+  const darkModeColors = usePdf((state) => state.darkModeColors);
+  const recolor = colorScheme === "dark" ? createDarkModeColorMap(darkModeColors) : null;
   const isVisible = isFirstPage || debouncedVisible;
   useEffect(() => {
     const renderThumbnail = async () => {
@@ -5852,13 +6419,23 @@ var useThumbnail = (pageNumber, config = {}) => {
         canvas2.height = scaledViewport.height;
         const context = canvas2.getContext("2d");
         if (!context) return;
-        const renderTask = pageProxy.render({
-          canvas: canvas2,
-          canvasContext: context,
-          viewport: scaledViewport
-        });
-        renderTaskRef.current = renderTask;
-        await renderTask.promise;
+        let restoreRecolor = null;
+        if (recolor) {
+          restoreRecolor = applyContextRecolor(context, recolor);
+        } else {
+          removeContextRecolor(context);
+        }
+        try {
+          const renderTask = pageProxy.render({
+            canvas: canvas2,
+            canvasContext: context,
+            viewport: scaledViewport
+          });
+          renderTaskRef.current = renderTask;
+          await renderTask.promise;
+        } finally {
+          restoreRecolor?.();
+        }
       } catch (error) {
         if (error instanceof Error && error.name === "RenderingCancelledException") {
           console.log("Rendering cancelled");
@@ -5876,7 +6453,7 @@ var useThumbnail = (pageNumber, config = {}) => {
         canvas.height = 1;
       }
     };
-  }, [pageProxy, isVisible, dpr, maxHeight, maxWidth]);
+  }, [pageProxy, isVisible, dpr, maxHeight, maxWidth, recolor]);
   return {
     canvasRef,
     containerRef,
@@ -6212,4 +6789,4 @@ function mergeAdjacentRects(rects) {
 // src/hooks/usePageRendered.ts
 var usePageRendered = (pageNumber) => usePdf((state) => !!state.renderedPages[pageNumber]);
 
-export { AnnotationHighlightLayer, AnnotationLayer, AnnotationTooltip, AnnotationsStoreProvider, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, PDFLinkServiceContext, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, useAnnotations, useCreatePDFLinkService, usePDFLinkService, usePDFPageNumber, usePageRendered, usePdf, usePdfJump, useSearch, useSelectionDimensions };
+export { AnnotationHighlightLayer, AnnotationLayer, AnnotationTooltip, AnnotationsStoreProvider, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, DEFAULT_DARK_MODE_COLORS, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, PDFLinkServiceContext, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, createDarkModeColorMap, useAnnotations, useCreatePDFLinkService, usePDFLinkService, usePDFPageNumber, usePageRendered, usePdf, usePdfJump, useSearch, useSelectionDimensions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anaralabs/lector",
-  "version": "3.12.9",
+  "version": "3.13.1",
   "description": "A headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",