Add Dark Mode to our iOS PDF viewer

Nutrient enables you to customize PDF rendering styles (i.e. page and text colors) using PDFAppearanceModeManager and RenderOptions.

Appearance mode

You can programmatically set the appearance mode for your PDFViewController’s PDFAppearanceModeManager like so:

let pdfController = ...
pdfController.appearanceModeManager.appearanceMode = .sepia

PSPDFViewController *pdfController = ...
pdfController.appearanceModeManager.appearanceMode = PSPDFAppearanceModeSepia;

The default value of the PDFAppearanceMode of a PDFViewController’s PDFAppearanceModeManager is the default setting, which means an empty option set.

Allowed appearance modes

Nutrient provides PDFSettingsViewController and BrightnessViewController built in to the user interface (UI) to let users change the appearance mode.

You can limit the allowedAppearanceModes in the UI with PDFConfiguration like this:

let configuration = PDFConfiguration { (builder) in
    builder.allowedAppearanceModes = [.night]
}

PSPDFConfiguration *configuration = [PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
    builder.allowedAppearanceModes = PSPDFAppearanceModeNight;
}];

Color transformation

Inverting colors is a simple way to achieve night mode, as this will result in, for example, a white page background becoming black. However, since this will also change colors of text and images, some parts of the document might look odd when simply inverted. Below you’ll see the default rendering.

The image below shows simple inversion. Notice that the text and graph colors are no longer similar to their original colors.

To address this, we added another step to achieve hue-preserving night mode, which means that the colors in night mode are hues similar to the colors in the default rendering, as shown below.

When applying PDFAppearanceMode.night, this hue-preserving night mode is used, which inverts the brightness while keeping the original hue. For example, red will be mapped to pink (light red) instead of cyan.

There are separate steps for changing the document page rendering to night mode and converting a UIColor from normal to night mode.

Document rendering

The most obvious aspect of the night appearance mode is that the rendering of document pages is changed from the default to the inverted hue-preserving rendering. This is done by post-processing the rendered document page image.

UIColor

There are various parts in the UI that use a raw UIColor. One example of this is the color of annotations during drawing when the annotations aren’t yet rendered on the page. In hue-preserving night mode, these colors are adjusted, similar to how changes are applied for document rendering, and this results in the same hue-preserving night mode color for all shown content.

Adapting UIColor has to be done in addition to document page rendering. This is because the rendering of existing annotations on the document page and the rendering of annotations while they’re being created use different code paths, and both paths require the same color transformation applied in slightly different ways.

Disable preserving hues

If you’d rather night mode used a straightforward color inversion without preserving hues, you can use AppearanceModeManagerDelegate:

pdfViewController.appearanceModeManager.delegate = self

Then implement appearanceManager(_:renderOptionsFor:) in your delegate to not include .colorCorrectInverted for the .night mode:

func appearanceManager(_ manager: PDFAppearanceModeManager, renderOptionsFor mode: PDFAppearanceMode) -> RenderOptions {
    let options = RenderOptions()

    if mode.contains(.night) {
        options.invertRenderColor = true
        // Don’t set `options.filters = .colorCorrectInverted` so the hues are not preserved.
    }

    if mode.contains(.sepia) {
        options.filters = .sepia
    }

    return options
}

Dark rendering without using appearance mode

PDFAppearanceModeManager is a higher-level API built on top of RenderOptions. You can set up the same night rendering without using the appearance mode manager like this:

document.updateRenderOptions(for: .all) { renderOptions in
    renderOptions.invertRenderColor = true
    renderOptions.filters = .colorCorrectInverted
}

If you’d like fine-grained control, you can use the additionalCIFilters property of RenderOptions to perform your own color adjustments. Applying additional filters to annotations isn’t currently supported.