Product update: Jitbit Helpdesk Gets a Dark Theme

by Alex Yumashev · Updated Aug 5 2020

We have finally finished working on the dark UI theme for Jitbit Heldpesk and already deployed it to the hosted version. Not having a dark theme in a product targeted at techies and geeks is ridiculous these days, so...

Challenge #1: UGC

Creating a "dark theme" might be more challenging than it seems, especially if you're displaying UGC - user-generated content - in your app.

And especially if that UGC comes from the most ugly-formatted medium on the planet - email.

So one of the annoyances we faced - is displaying all the crappy email formatting users have in their messages. To deal with that we had to introduce a client-side color-parsing algorithm, that searches user content for "color" and "background-color" CSS properties, calculates the color's "lightness" and if that lightness is below the threshold - we remove the styling. Here's a sample code we had to use:

This function, for example, calculates a color's "brightness" based on it's R-G-B values:

//brightness in 0..255 format. 128 is the middle
//rgb is an array or [R,G,B] colors
this.getBrightnessYIQ = function (rgb) {
    var r = rgb[0], g = rgb[1], b = rgb[2];
    return ((r * 299) + (g * 587) + (b * 114)) / 1000;
}

And then we use something like this to iterate through all UGC-elements and remove the styling if its "too dark". The CSS-selector we use is ".ugc [style*='color']" which basically says "take all user-generated elements that have a style attribute with a color-property".

//pass a selector like ".ugc [style*='color']"
this.removeDarkColorStyles = function (selector, brightnessThreshold) {
    var elements = document.querySelectorAll(selector); //find all UGC elements
    for (var i = 0; i < elements.length; i++) {
        var el = elements[i];
        var brightness = this.getBrightnessYIQ(this.parseColor(getComputedStyle(el).color));
        //if brightness is below threshold - remove the style
        if (brightness < brightnessThreshold) {
            el.style.removeProperty("color");
            el.removeAttribute("color");
        }
    }
}

And then we use this method to "unstyle" all elements with brightness lower than "80".

Challenge #2: copy-pasting

If your app has a dark theme, copy-pasting text to another "light" app from it - makes it look ugly.

Here's an example:

To avoid that you want to add a "copy" event handler and remove unnecessary formatting. Simply getting the selection's html and then modify the data in the clipboard. Here's some code:

//intercept copy event and remove formatting otherwise adds dark theme styles etc
document.addEventListener('copy', function (e) {
    var text = getSelectionHtml();
    if (text) { //IE?
        e.clipboardData.setData('text/html', text);
        e.preventDefault();
    }
});

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    }
    return html;
}

Long story short, that's why the feature is still experimental (as in "beta"), so please report any bugs and inconsistencies.

How to enable

This is a "per-user" setting (we've actually run a short customer survey on whether we should make it global), so to enable it go to your helpdesk user profile, switch to editing and enable the "Dark UI theme" switch.