Render document in night mode

Q:How can I render a document in night mode?

A: Night mode is not supported yet in PSPDFKit for Web, but you could emulate it:

  • Using CSS:

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

.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, which 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 choose to balance between color fidelity and performance by letting the browser invert every pixel color, so not only white gets rendered as black, but all the other colors get 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 it:

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

In order 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 approach results in a big performance hit, so we do not recommend it.

This has been tested with PSPDFKit for Web 2021.3.0