Different Trello every day

Trello. Tasks. I was tired of seeing this blue-ish default color every single day. I know, there’s palette to change a background but I needed something more fancy – since I work with it everyday, it could also look different everyday!

So I made a simple script using Tampermonkey extension under Chrome web browser. On Firefox you could go similiar way with Greasemonkey.

Basic stuff

Create new script, change  @match  http://*/*   to:  @include /^https?://trello\.com/b/.+$/

Let’s start coding with function that creates new style dynamically:

That’s pretty basic. New <style type="text/css">  element is created, later we’re going to add it to the page.

Here we have colors that were picked up from Material Design:

Let’s now randomize a color for current day:

Finally, setup color on the page:

Today my Trello is full of gold!

But let’s Fix it

But there’s an issue – Trello is SPA. When you first go to main page and then choose your Board, background won’t be randomized. URL is being changed but the page is not really refreshed. Hit F5 and it will work. But click on the Trello logo and board list will be colorized, which doesn’t look always well.

New approach will be installing script for just whole Trello – no matter if it’s board list or a board – and reacting to how the site changes.

So, let’s first change @include   /^https?://trello\.com/b/.+$/  to just @include   /^https?://trello\.com/?.*$/

Next, we’re gonna need waitForKeyElements() that can be found here. Instead of just adding the style to the body, we’re do this on events: