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:
function createStyle(css) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
return style;
}
That’s pretty basic. New element is created, later we’re going to add it to the page.
Here we have colors that were picked up from Material Design:
var colors = ["673ab7","3f51b5","2196f3","03a9f4","0288d1","01579b","006064","26c6da","0091ea","4caf50","2e7d32","00695c","64ffda","00c853","8bc34a","ffc107","ffb300","ff9800","f4511e","bf360c","795548","9e9e9e","fafafa","9e9e9e","757575","6d4c41","607d8b","b0bec5","78909c","455a64","212121"];
Let’s now randomize a color for current day:
var oneDayInMs = 1000*60*60*24;
var currentTimeInMs = new Date().getTime(); // UTC time
var timeInDays = Math.floor(currentTimeInMs / oneDayInMs);
var numberForToday = timeInDays % 9999;
var index = numberForToday % colors.length;
var color = '#' + colors[index];
Finally, setup color on the page:
var style = createStyle('body{background-color:' + color + ' !important;}');
document.body.appendChild(style);
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:
var style = createStyle('body{background-color:' + color + ' !important;}');
var alreadyAdded = false;
// add style when on board page
waitForKeyElements(".board-wrapper", function() {
if (!alreadyAdded) {
document.body.appendChild(style);
alreadyAdded = true;
}
});
// remove style when on board list page
waitForKeyElements('.member-boards-view', function() {
if (style.parentNode) {
style.parentNode.removeChild(style);
}
alreadyAdded = false;
});