Mark - backgroundColor

Purpose

The backgroundColor mark sets background color styling. This mark applies to text nodes.

Example

1
2
{
  "type": "text",
  "text": "Hello world",
  "marks": [
    {
      "type": "backgroundColor",
      "attrs": {
        "color": "#fedec8"
      }
    }
  ]
}

Combinations with other marks

The backgroundColor cannot be combined with the following marks:

• code

Rendering colors with theme support

Colors are stored in a hexadecimal format - but need to be displayed differently depending on the current product theme, such as light and dark mode. Support for this is provided via a mapping from each hexadecimal color to a design token from the Atlassian Design System.

Currently, such theming is only supported on web.

This mapping is provided by the @atlaskit/editor-palette package. Documentation for this package is found at https://atlaskit.atlassian.com/packages/editor/editor-palette.

Documentation for Atlassian Design System tokens is found at https://atlassian.design/components/tokens.

Fields