Webviewer: Bookmark color

Can the Bookmark font color be changed different for Dark mode and Light mode? if so how can this be implemented.

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hi Prabahar,

There are 2 ways to do this:

  1. You can change the CSS properties by injecting your own stylesheet into WebViewer.
    Here is a guide to doing that.
    The specific CSS class to change will be .bookmark

  2. You can fork the UI repo and create your own customized UI. Here is a guide to doing that.
    The specific file to change will be this one:
    webviewer-ui/Bookmark.scss at 8.4 · PDFTron/webviewer-ui · GitHub

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

Hi Ahmad,
I tried to change the color using webViewerInstance.UI.iframeWindow.document.documentElement.style.setProperty(’–outline-color’, ‘black’) but when I change the theme, it switches back to blue which. CSS to .bookmark, it does not work. I think the bookmark is part of .Outline but that did not work as well.

Hi Prabahar,

Oh, I misunderstood. It seems you are trying to change the Outline colors and not the bookmark colors.

I was able to change the CSS for the outline to black using the code below:

.Outline .Button {
    color: black !important;
}

Also if you want to use the setProperty to change the color you can listen for the themeChanged event. And call setProperty again to set it back to black.

Let me know if there are any issues.

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com