Rendering the Color field

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

The Color field allows content writers to select a hex color. Useful if you want to allow your content authors to define a background color or something similar.

Using the Color value

Here's an example where we use a Color field to set the text color of a title, where we have queried the data and stored the result as a variable called document, like so. When setting inline style like in the example below in Gatsby you will have to pass the CSS as a variable.

In this case, the Key Text field has the API ID of title_color.

Copy
const titleStyle = { color: document.title_color }
return (
  <h3 style={titleStyle}>Colorful Title</h3>
)

A full example

Now let's take a look at a full page component example. Here you can see how the Color field is included in the query for a document with the UID of test-page, retrieved, and templated on the page. Again in this example the API ID of the Color field we're retrieving is title_color.

Copy
import React from 'react'
import { graphql } from 'gatsby'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  const titleStyle = { color: document.title_color }
  return (
    <h3 style={titleStyle}>Colorful Title</h3>
  )
}

export const query = graphql`
query {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          title_color
        }
      }
    }
  }
}
`

export default Page