react-pdf-highlighter icon indicating copy to clipboard operation
react-pdf-highlighter copied to clipboard

Dynamically changing highlight color

Open codepeach opened this issue 1 year ago • 2 comments

Is there a way I can dynamically change the color of the highlights based on what emoji the user selects? I can't seem to figure a solution for this. Not quite an issue, but It's a limitation

codepeach avatar Oct 24 '24 07:10 codepeach

@codepeach HI dude, try these overding CSS(Global) to change

to change highlight color: .part { cursor: pointer; position: absolute; background: rgba(255, 226, 143, 1); transition: background 0.3s; }

the color of the text:

.textLayer { z-index: 2; opacity: 1; display: flex; ${blendModeStyle} } .textLayer :is(span, br) { color: ${color}; background-color: ${backgroundColor}; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; font-family: ${fontFamily}; font-size: ${fontSize}; font-weight: ${fontWeight}; font-style: ${fontStyle}; }

KarthikeyaKollu avatar Dec 03 '24 05:12 KarthikeyaKollu

if want to change the library itself look for AreaHighlight.module.css for area highlight or Highlight.module.css or text highlight or to overide the text color of pdfjs looks for pdf_viewer.css Hope it helpful!

KarthikeyaKollu avatar Dec 03 '24 05:12 KarthikeyaKollu