Render a Document in Night Mode

Night mode isn’t yet supported in PSPDFKit for Web, but to render a document in night mode, you could emulate it in a couple different ways.

Using CSS

You can use the CSS filter property (not supported in IE11) to invert the brightness of the document and annotations without affecting the actual hue of colors:

.PSPDFKit-Spread {
  filter: invert(1) hue-rotate(-180deg);
}

Internet Explorer 11 is no longer supported in our Web SDK as of version 2022.5. Edge 18 is no longer supported in our Web SDK as of version 2023.2.

Using PSPDFKit.Configuration#renderPageCallback

PSPDFKit.Configuration#renderPageCallback will only affect the page background and not the annotations. However, mapping inverse colors with precision is a recourse-intensive task. In the following example, we chose to balance between color fidelity and performance by letting the browser invert every pixel color, so not only is white rendered as black, but all the other colors are inverted too (blue as yellow, cyan as magenta, etc). You can consider how important color fidelity is for your use case before making use of this code:

PSPDFKit.load({
  ...defaultConfiguration,
  renderPageCallback(ctx, pageIndex, pageSize) {
    ctx.globalCompositeOperation = "difference";
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, pageSize.width, pageSize.height);
  }
});

To achieve color fidelity when inverting colors for night mode, you could also convert every pixel to HSV, invert the luminance value, and then convert the pixel back to RGB to be rendered. In our tests, such an approach results in a big performance hit, so we don’t recommend it.

This has been tested with PSPDFKit for Web 2021.3.0