Restoring the classic Trello label colours using Stylish

Screenshot of Trello showing lists of cards with colourful labels
Example Trello board showing the restored classic Trello label colours

I’ve written a Stylish CSS script that restores the classic Trello label colours after they were recently updated to a colour palette that genuinely makes me feel miserable looking at them.

You can use this example Trello board with all the labels to test if the Stylish script is working for you.

Background

Trello is a very useful web-based, kanban-style, list-making application.

One of the reasons that I have loved using Trello since its launch by Fog Creek Software in 2011, is the bright and cheerful label colours.

What many don’t realise is the original colour palette was based on the Apple rainbow stripe logo used between 1977 and 1998.

Apple logo shows a stylised apple with a chunk bitten from it. It is striped green, yellow, orange, red, purple and blue.

In 2017, Trello was sold to American-Australian software company Atlassian, most famous for its Jira issue and project tracking software.

This year, Atlassian changed the by now expanded colour palette to something a lot less cheerful.

Left: Classic palette vs. Right: New 2023 palette

I’m a big believer in: if you don’t like it, do something about it. And one of the benefits of being somewhat geeky, I can do something about this.

The fix

Like all web applications, Trello uses Cascading Style Sheets (CSS) to control how the app looks. By using a browser plugin like Stylish (Chrome or Firefox).

Using Chrome’s built-in code inspector, I have written a CSS stylesheet to overrule the default Trello label colours and replace them with the old ones.

CSS code
Snippet of the CSS code

How to…

This fix uses the Stylish extension for Google Chrome or Mozilla Firefox. Install that first.

The easiest way to install it is to visit the Trello classic label colours page on userstyles.org and click the Install Style button.

Userstyles.org has not been working for me for a few months now, every update I attempted just threw an unknown error, so I have deleted it from Stylish. You will need to add it manually to Stylish from GitHub.

If you like to do things manually, visit the GitHub page where you will find the source code and detailed instructions on what to do.

Then head over to one of your Trello boards and voila! your labels are colourful and happy once again.

You can use this example Trello board with all the labels to test if the Stylish script is working for you.

Published by

Gareth Saunders

I’m Gareth J M Saunders, 52 years old, 6′ 4″, father of 3 boys (including twins). Enneagram type FOUR and introvert (INFP), I am a non-stipendiary priest in the Scottish Episcopal Church, I sing with the NYCGB alumni choir, play guitar, play mahjong, write, draw and laugh… Scrum master at Safeguard Global; latterly at Sky and Vision/Cegedim. Former web architect and agile project manager at the University of St Andrews and previously warden at Agnes Blackadder Hall.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.