react-pdf-highlighter-plus 1.0.8 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -0
- package/dist/esm/index.d.ts +563 -9
- package/dist/esm/index.js +1406 -27
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -1
- package/dist/esm/style/AreaHighlight.css +0 -134
- package/dist/esm/style/DrawingCanvas.css +0 -62
- package/dist/esm/style/DrawingHighlight.css +0 -184
- package/dist/esm/style/FreetextHighlight.css +0 -249
- package/dist/esm/style/ImageHighlight.css +0 -97
- package/dist/esm/style/MouseSelection.css +0 -15
- package/dist/esm/style/PdfHighlighter.css +0 -77
- package/dist/esm/style/ShapeCanvas.css +0 -47
- package/dist/esm/style/ShapeHighlight.css +0 -182
- package/dist/esm/style/SignaturePad.css +0 -83
- package/dist/esm/style/TextHighlight.css +0 -199
- package/dist/esm/style/pdf_viewer.css +0 -41
- package/dist/esm/style/style.css +0 -13
package/README.md
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
| **Images & Signatures** | Upload images or draw signatures directly on PDFs |
|
|
40
40
|
| **Freehand Drawing** | Draw freehand annotations with customizable stroke |
|
|
41
41
|
| **PDF Export** | Export annotated PDF with all highlights embedded |
|
|
42
|
+
| **Light/Dark Theme** | Eye-friendly dark mode with customizable intensity |
|
|
42
43
|
| **Zoom Support** | Full zoom functionality with position-independent data |
|
|
43
44
|
| **Fully Customizable** | Exposed styling on all components |
|
|
44
45
|
|
|
@@ -237,6 +238,55 @@ import { DrawingHighlight } from "react-pdf-highlighter-plus";
|
|
|
237
238
|
|
|
238
239
|
---
|
|
239
240
|
|
|
241
|
+
## Light/Dark Theme
|
|
242
|
+
|
|
243
|
+
Toggle between light and dark modes with customizable styling for comfortable reading.
|
|
244
|
+
|
|
245
|
+
```tsx
|
|
246
|
+
// Enable dark mode
|
|
247
|
+
<PdfHighlighter
|
|
248
|
+
pdfDocument={pdfDocument}
|
|
249
|
+
theme={{ mode: "dark" }}
|
|
250
|
+
highlights={highlights}
|
|
251
|
+
>
|
|
252
|
+
<HighlightContainer />
|
|
253
|
+
</PdfHighlighter>
|
|
254
|
+
|
|
255
|
+
// Customize dark mode intensity and colors
|
|
256
|
+
<PdfHighlighter
|
|
257
|
+
pdfDocument={pdfDocument}
|
|
258
|
+
theme={{
|
|
259
|
+
mode: "dark",
|
|
260
|
+
darkModeInvertIntensity: 0.85, // Softer (0.8-1.0)
|
|
261
|
+
containerBackgroundColor: "#3a3a3a",
|
|
262
|
+
scrollbarThumbColor: "#6b6b6b",
|
|
263
|
+
scrollbarTrackColor: "#2c2c2c",
|
|
264
|
+
}}
|
|
265
|
+
highlights={highlights}
|
|
266
|
+
>
|
|
267
|
+
<HighlightContainer />
|
|
268
|
+
</PdfHighlighter>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
**Features:**
|
|
272
|
+
- Eye-friendly dark mode using CSS filter inversion
|
|
273
|
+
- Customizable inversion intensity (0.8-1.0)
|
|
274
|
+
- Preserve original highlight colors in dark mode
|
|
275
|
+
- Custom scrollbar styling
|
|
276
|
+
- Full theming control for container background
|
|
277
|
+
|
|
278
|
+
**Inversion Intensity Guide:**
|
|
279
|
+
| Value | Result | Use Case |
|
|
280
|
+
|-------|--------|----------|
|
|
281
|
+
| `1.0` | Pure black | High contrast |
|
|
282
|
+
| `0.9` | Dark gray (~#1a1a1a) | **Recommended** |
|
|
283
|
+
| `0.85` | Softer gray (~#262626) | Long reading sessions |
|
|
284
|
+
| `0.8` | Medium gray (~#333333) | Maximum comfort |
|
|
285
|
+
|
|
286
|
+
[Full Documentation →](docs/theming.md)
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
240
290
|
## PDF Export
|
|
241
291
|
|
|
242
292
|
Export your annotated PDF with all highlights embedded.
|