Color Scheme adaptions

The color scheme for the consolidated checkout can be adapted to integrate better into the scheme of the embedding page. This is done by using the configuration option "colorScheme" in the configuration object. Changes in this property will be applied initially and on calling the forceRefresh callback. This page demonstrates which settings affects which elements and allows for trying out matching combinations.

Limitation: This feature is not available on Internet Explorer 11 due to IE's lack of support for modern CSS features. Setting a color scheme on IE11 will only change the color of category icons, but not affect other elements, these will use the default color scheme. For your information, as of April 2020, 0.66% of requests to all installations of our widgets are coming from Internet Explorer.

Example

ColorScheme.base

The base color. This color is used for selected elements in the widget. Various transparent shades of this color are used for hover effects. Allowed property values are hex, rgb and hsl color definitions, named colors will yield unwanted results with calculating the transparent variations.

ColorScheme.contrastLight

A light contrast color to the base color. This color is used e.g. for the window in the "home" icon. Allowed property values are hex, rgb and hsl color definitions.

ColorScheme.contrastDark

A dark contrast color to the base color. This color is used e.g. for the door in the "home" icon. Allowed property values are hex, rgb and hsl color definitions.

Code

Colors are set by setting the appropriate value of the "colorScheme" property in the configuration object. None of the values is required, so only color definitions that should not use default need to be passed. Color values can be passed as hex values preceeded by "#", rgb values or hsl values. Named colors (e.g. "white", "lightgrey") might lead to unwanted results, as transparent shades of the base color are calculated within the widget.

<script>
  window.porterbuddy = {
    homeDeliveryOptions: homeOptions,
    pickupPointOptions: pickupOptions,
    storeOptions: storeOptions,
    colorScheme: {
      base: "#00B6BC",
      contrastLight: "#81D0D9",
      contrastDark: "#0B6574"
    }
  };
</script>