How to change the colour theme in your Sketch UI library

Update your components’ colour theme in 4 easy steps.

4 min readMar 8, 2020

If you’re creating a Sketch library or adopting someone else’s library, you’d probably need to make it customisable to suit the brand or theme of the different products users of your Library would be working on. The most basic custom option is to allow the ability to customise your colour themes.

Note: At time of writing, author is using Sketch V63.1.

Step 1: Layer Style 👏 it 👏 up👏

Fill your component layers with your brand colour using Layer Styles

Make sure all the components you want customisable are filled by the same brand colour via Layer Style. Here, we have named our blue brand colour “Primary”.

Do this from the Symbols page. Remember, if Symbols are the building blocks for your app, Layer Styles are like the atoms that make up these building blocks.

If there are secondary colours, make sure to create a separate layer style and name them accordingly. If stroke colours are part of the branding, create a style for that too.

Step 2: Select on a fill layer on your component

You can do this from your Symbols page. Click on an item filled with the Primary blue layer style.

Step 3: Change the fill colour from the Fills inspector

Copy and paste the new colour code you want to change the theme to. Here, we have changed the blue to our new brand colour — a bright purple.

Step 4: Click on Update ↻ button.

Under the Appearance layer style, click on the Update button. Voila! All the symbols in your library filled with the old brand colour is now updated with your spanking new brand purple!

Recap: Select layer. Change fill colour. Update Layer style.

Hang on… What about the old strokes and text colour?

Chances are, your UI library also contains that stroke and text link with that old brand colour. If you have already looked them up with stroke layer style and text layer style, go ahead and do the same 4 steps as show above. Easy!

But if your library is not using Styles for those yet, tough luck. Create a new stroke colour style, then go into your Symbols page and change all the necessary stroke layers to this new style. This will probably take a while if your Library already contains many components.

Create and name new layer style. Apply to other components.

Sketch manages colours under Layer Styles rather than purely colour attributes. So if you have purple strokes that are 1px in some places, and 4px in others, you will have to create separate layer styles for them, and then change the Primary colour of the layer styles separately. I would name them something like: “Strokes / Primary 1px” and “Strokes / Primary 4px”.

All the organising tasks comes under the left side panel. You can delete, rename your Layer and Text styles under the Components tab here.