gatsby-plugin-extract-image-color

Extracts colors from image adds them to the image data

This is a fork of the original plugin, updated for use with Gatsby 4+.

Installation

1. npm i gatsby-plugin-extract-image-colors Or, yarn add gatsby-plugin-extract-image-colors
2. Add config to gatsby-config.js

// gatsby-config.js
module.exports = {
  plugins: [
    //... Other plugins
    'gatsby-plugin-extract-image-colors'
  ]
}

Or with options

module.exports = {
  plugins: [
    //... Other plugins
    {
      resolve: 'gatsby-plugin-extract-image-colors',
      options: {
        extensions: ['jpg', 'png']
      }
    }
  ]
}

Default options:

options: {
  extensions: ['jpg', 'png']
}

Example

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'

const query = graphql`
  {
    file(extension: { eq: "jpg" }) {
      relativeDirectory
      name
      id
      publicURL
      extension
      publicURL
      fields: {
        ...GatsbyImageColors
        # Adds these fields:
        # colors {
        #   vibrant
        #   darkVibrant
        #   lightVibrant
        #   muted
        #   darkMuted
        #   lightMuted
        # }
      }
      childImageSharp {
        fluid(maxWidth: 2500) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

const ImageWithBackground = () => {
  const data = useStaticQuery(query)
  return (
    <div style={{ backgroundColor: data.file.fields.colors.vibrant, height: '100vh' }}>
      <Img fluid={data.file.childImageSharp.fluid} />
    </div>
  )
}

export default ImageWithBackground