Thieving Your Way to a Dynamic Colour Theme in React
Dynamically set the colour palette of your React components with color-thief-react.
Time to read: ~2 minutes
Published: Sunday, November 7th 2021
Table of Contents
I always thought it was really cool how some applications were able to dynamically set the colour of components on their page based on an image that was being displayed.
There are two main components included in this package: Color and Palette. Color will get you a single dominant colour from a source image while Palette will return a number of colours. Both of these components are also available as hooks. If you want to take a deeper dive into the details about this package, you should check out the README in the github repo.
I'm starting off with a bare bones create-react-app with all the extra fluff removed.
Next we want to install the package.
I'm a big fan of react hooks and it makes things super simple. Inside a functional component, it's as easy as adding the following snippet.
Here we grab an image from our local directory (alternatively you can pull an image from an online source), and use it inside the
useColor react hook along with our desired colour format. We can access this colour data using
data. Now we can use the data to specify the colour for our elements!
And here is what things should look like if you did things correctly:
The useColor hook also provides access to two additional properties:
error. Pull in react's
useEffect for monitoring the status of the
loading property and you can add some neat reactiveness to your application!
Now if you need more than a single colour, you might want to extract a palette from the image instead. Check out the example below!
And voila! Color thief was able to extract the top 3 colours from the image so that I could use it to colour the text elements (one of the colours was super bright so you may not be able to see it).
With this, you can achieve some pretty cool dynamic theming with colours that match your media. Check out this demo which selects colours from the palettes of the album covers of some of my favourite music artists.
So now you see how easy it is to get this working and how it can help to add some cohesivness to the elements accompanying your media in your application. To build on this, I'll be looking for a solution that ensures that text has appropriate contrast with its background. I'll be discussing this in one of my posts in the future so stay tuned for that!
Thanks for reading, now go build some stuff!