Add background colour to your Planner Cards - now available as a Chrome extension!

UPDATE: Microsoft have changed the render model for Planner so unfortunately this approach doesn't work any more. This is no great surprise and my post was always disclaimed that this could happen at any time!
In the meantime, I've created another Chrome extension to make Planner render in Dark Mode which is really cool!

One thing that bugs me about Planner is the way the Labels are presented on the Task Board. They are so small and don't really catch the eye - wouldn't it be better if the Task Card itself was given the colour of the label?

Just like this:

Planner - with coloured tasks!

I think this makes a big Task Board much easier to visually scan, and I'm clearly not alone in wanting this based on this User Voice request, and this one, and this one, and this one!

Disclaimer time! Unfortunately Microsoft hasn't yet provided methods to customise Planner in an enterprise-ready, supportable manner. So this is a bit of a hack using client-initiated JavaScript injection. The approach is (by necessity) rather crude - it uses jQuery DOM examination to scan Task Cards to see if they any labels applied, and to force background colours accordingly. Cards can have multiple labels, but I chose in this implementation to simply use the first label applied - this will be the 'hottest' colour of the selected labels. I also chose to add a grey colour to unlabelled Cards and to give all cards a highlight colour down the left to match the Planner visual theming of labels.

The approach relies heavily on specific mark-up structures and CSS class names which are liable to change at any time, so be aware that this will stop working at some point when Microsoft update Planner. I used an ugly approach to run the code every second - this ensures that the colours can be updated quickly as you change Cards labels, without requiring a page reload.

So - without further ado, here's the code:

// Script to colour code Planner tasks based on labels!

function colourisePlannerTaskCards() {

    // Colourise task cards
    $(".taskBoardCard").each( function(i) {
        
        // Light theme works better for individual cards (otherwise we get contrast issues)
        $(this).addClass("theme-light");

        // Choose colour
        if ($(this).find(".categoryLabelColor-0").length > 0)
        {
            $(this).find(".container").css("background", 
                "linear-gradient(to right,#e000f1 0,#e000f1 2%,#f777ff 2%,#f777ff 100%)");
        }
        else if($(this).find(".categoryLabelColor-1").length > 0)
        {
            $(this).find(".container").css("background", 
                "linear-gradient(to right,#e04e27 0,#e04e27 2%,#f9a286 2%,#f9a286 100%)");
        }
        else if($(this).find(".categoryLabelColor-2").length > 0)
        {
            $(this).find(".container").css("background", 
                "linear-gradient(to right,#e39e27 0,#e39e27 2%,#fbd18e 2%,#fbd18e 100%)");
        }
        else if($(this).find(".categoryLabelColor-3").length > 0)
        {
            $(this).find(".container").css("background", 
                "linear-gradient(to right,#aee01e 0,#aee01e 2%,#ddf48a 2%,#ddf48a 100%)");
        }
        else if($(this).find(".categoryLabelColor-4").length > 0)
        {
            $(this).find(".container").css("background", 
                "linear-gradient(to right,#46a08e 0,#46a08e 2%,#9cd5c7 2%,#9cd5c7 100%)");
        }
        else if($(this).find(".categoryLabelColor-5").length > 0)
        {
            $(this).find(".container").css("background", 
                "linear-gradient(to right,#62cef0 0,#62cef0 2%,#a7eeff 2%,#a7eeff 100%)");
        }
        else
        {
            $(this).find(".container").css("background",
                "linear-gradient(to right,#a5a7a9 0,#a5a7a9 2%,#d5d7d9 2%,#d5d7d9 100%)");
        }
        $(this).find(".textContent").css("background", "none");
        $(this).find(".bottomBar").css("background", "none").css("border-top", "none");

    });

    setTimeout(colourisePlannerTaskCards, 1000);
}

window.addEventListener('load', function(){
    colourisePlannerTaskCards();
});

Try it out and let me know what you think in the comments! And of course upvote the User Voice suggestions that I linked to at the top of the post.

And as a final note, in creating this hack I noticed an interesting CSS class "theme-light" which is applied on the <body> element and heavily influences the CSS. If this is class changed (manually or through injected JavaScript) to "theme-dark" then suddenly we can see that Microsoft has a partially implemented native dark theme for Planner! It's ultra-high-contrast with bright green cards and it's clearly a work in development but I'm keen to see it fully implemented.