Apostrophe 3 Documentation

# color

color fields provides the end user with a color picker interface. They also validate submitted values using the TinyColor utility (opens new window). Colors are saved as strings in 8 digit hex code (opens new window), or #rrggbbaa, format.

# Module field definition

// Configuring the `themeColor` field in a module's `fields.add` subsection:
themeColor: {
  type: 'color',
  label: 'Theme color'
}

# Settings

# Required

Property Type Default Description
label String n/a Sets the visible label for the field in the UI
type String n/a Specifies the field type (color for this type)

# Optional

Property Type Default Description
def String n/a The default value for the field
help String n/a Help text for the content editor
htmlHelp String n/a Help text with support for HTML markup
if Object {} Conditions to meet before the field is active. See the guide for details.
required Boolean false If true, the field is mandatory
readOnly Boolean false If true, prevents the user from editing the field value
options Object n/a An object containing color picker configuration. See below.

# options

Color fields have additional settings configured in an options object:

# format

The color string format saved to the database. Possible options are:

  • rgb
  • prgb
  • hex6
  • hex3
  • hex8
  • hsl
  • hsv

The default value is hex8 (opens new window).

backgroundColor: {
  type: 'color',
  label: 'Background color',
  options: {
    format: 'rgb'
  }
}

# pickerOptions

The color picker interface can be configured to present editors with different selection options. The configuration should go in the options property as pickerOptions. The picker options are below.

# presetColors
  • Type: Array

An array of color values, used as swatches.

  • Default Value:
[
  '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
  '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
  '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
]
  • Usage
backgroundColor: {
  type: 'color',
  label: 'Background color',
  options: {
    pickerOptions: {
      presetColors: ['#ea433a', '#cc9300', '#b327bf', '#66f', '#00bf9a']
    }
  }
}
# disableAlpha
  • Type: Boolean

Control alpha transparency with a range input.

Default value

false
# disableFields
  • Type: Boolean

Control color value with string inputs (Hex & RGBA).

Default value

false

# Use in templates

<button style="background-color: {{ data.piece.themeColor or '#639' }}">
  Enhance
</button>

← date →