Steve Fenton

Highlight versions on the Octopus Deploy dashboard

Unless you enjoy carefully comparing numbers, the Octopus Deploy Dashboard is a bit of a pain when it comes to seeing what version is one what environment. What follows is a terribly hacky trick you can use to colourise the version numbers on the dashboard (a feature that I imagine will eventually become a graceful product feature some time in the future… hint hint!).

The hacky part of this is that it a bit of JavaScript you can fire into your browser console… the good part is that the colours have been chosen to provide good contrast, especially where versions are close together.

Octodash Output

You can edit the script if you want to use your own colours:

const colouring = function () {
    var colors = ['#fea3aa', '#f8b88b', '#faf884', '#baed91', '#b2cefe', '#f2a2e8'];
    var nextColorIndex = 0;
    var versions = [];

    var elems = document.querySelectorAll('[class^=style_version__');

    for (var i = 0; i < elems.length; i++) {
        var version = elems[i].innerHTML;
        var color = null;
        for (var j = 0; j < versions.length; j++) {
            if (versions[j].version == version) {
                color = versions[j].color;
        if (!color) {
            color =  colors[nextColorIndex];
                version: version,
                color: color
            if (nextColorIndex >= colors.length) {
                nextColorIndex = 0;

        elems[i] = color;


let octodashInterval = octodashInterval || null;
octodashInterval = window.setInterval(colouring, 10000);

You can also use this bookmarklet:



This script has been updated for the latest version of Octopus (July 2020).

You can test the scriptlet on the Octopus Demo.

Written by Steve Fenton on