Random colors from a palette

Here's a dumb thing I added to the Gatsby.js Starter Default.

I am mostly trying to emulate the very simple look of Manton Reese's blog, but I wanted a little bit of color on each post. I put a handful of colors in an array and exported a randomizing function.

const array = [
  "rgba(237, 106, 90, 1)",
  "rgba(155, 193, 188, 1)",
  "rgba(92, 164, 169, 1)",
  "rgba(200, 229, 153, 1)",
  "rgba(166, 189, 219, 1)",
]
const rnd = array => Math.floor(Math.random() * (array.length - 1))
export const rndColor = () => array[rnd(array)]

When gatsby-node.js runs, it puts a random color from this 'palette' into the fields along with the standard slug.

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
  const { createNodeField } = boundActionCreators
  if (node.internal.type === "MarkdownRemark") {
    const slug = createFilePath({ node, getNode, basePath: "pages" })
    createNodeField({
      node,
      name: "slug",
      value: slug,
    })
    createNodeField({
      node,
      name: "color",
      value: rndColor(),
    })
  }
}

Then the blog-post template pulls the color out of the query when it generates pages, and uses the color for its 'dividers' (like down there ⬇️️️️️️️).