react-pdf-highlighter-plus

Theme configuration for PdfHighlighter styling. Controls the appearance of the PDF viewer including dark mode support.

interface PdfHighlighterTheme {
    containerBackgroundColor?: string;
    darkModeInvertIntensity?: number;
    mode?: "dark" | "light";
    scrollbarThumbColor?: string;
    scrollbarTrackColor?: string;
}

Properties

containerBackgroundColor?: string

Background color of the viewer container.

Default

"#e5e5e5" for light mode, "#1e1e1e" for dark mode
darkModeInvertIntensity?: number

Inversion intensity for dark mode (0-1). Lower values create softer dark backgrounds that are easier on the eyes.

  • 1.0 = Pure black background (harsh)
  • 0.9 = Dark gray ~#1a1a1a (recommended)
  • 0.85 = Softer gray ~#262626 (very comfortable)
  • 0.8 = Medium gray ~#333333 (maximum softness)

Default

0.9
mode?: "dark" | "light"

Theme mode - controls PDF page color inversion. In dark mode, PDF pages are inverted for comfortable reading.

Default

"light"
scrollbarThumbColor?: string

Scrollbar thumb color.

Default

"#9f9f9f" for light mode, "#6b6b6b" for dark mode
scrollbarTrackColor?: string

Scrollbar track color.

Default

"#d1d1d1" for light mode, "#2c2c2c" for dark mode