Mark - textColor

Purpose

The textColor mark sets color styling. This mark applies to text nodes.

Example

1
2
{
  "type": "text",
  "text": "Hello world",
  "marks": [
    {
      "type": "textColor",
      "attrs": {
        "color": "#97a0af"
      }
    }
  ]
}

Combinations with other marks

The textColor cannot be combined with the following marks:

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

NameRequiredTypeValue
typestring"textColor"
attrsobject
attrs.colorstringA color defined in HTML hexadecimal format, for example #daa520.
To display this color with correct contrast in different product themes, such as light and dark mode, use @atlaskit/editor-palette to map this color to a design token from the Atlassian Design System.

Rate this page: