Adding Custom Color Presets to Color Dropdowns in Viewer

By default, PSPDFKit for Web ships with an array of 18 colors, and it comes with a customizable color dropdown.

With our [PSPDFKit.Configuration#annotationToolbarColorPresets][] API, you can remove any of the built-in colors, or you can replace them completely.

Here’s an example of how to remove a color from our built-in colors in all color dropdowns:

PSPDFKit.load({
  annotationToolbarColorPresets: ({
    defaultAnnotationToolbarColorPresets
  }) => {
    const customColorPresets = defaultAnnotationToolbarColorPresets.pop();
    return { presets: customColorPreset };
  }
  //...
});

We also offer fine-grained control over each of the dropdowns associated with a different annotation color property.

Our built-in color properties are:

  • 'color'

  • 'stroke-color'

  • 'fill-color'

  • 'background-color'

  • 'font-color'

  • 'outline-color'

Here’s an example of fine-grained customization of the dropdown:

PSPDFKit.load({
  annotationToolbarColorPresets: ({
    propertyName,
    defaultAnnotationToolbarColorPresets
  }) => {
    if (propertyName === "font-color") {
      const customColorPresets = defaultAnnotationToolbarColorPresets.pop();
      return customColorPreset;
    }

    if (propertyName === "stroke-color") {
      return {
        presets: [
          {
            color: new PSPDFKit.Color({ r: 0, g: 0, b: 0 }),
            localization: {
              id: "brightRed",
              defaultMessage: "Bright Red"
            }
          },
          {
            color: new PSPDFKit.Color({ r: 100, g: 100, b: 180 }),
            localization: {
              id: "deepBlue",
              defaultMessage: "deepBlue"
            }
          }
        ],
        showColorPicker: false
      };
    }
  }
  //...
});

If propertyName is set to a string that we don’t support — in other words, if it doesn’t match one of the strings of our built-in color properties — an error will be thrown when initializing PSPDFKit.