Product update: Jitbit Helpdesk Gets a Dark Theme

Updated Mar 25 2020 :: by Alex Yumashev

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...

Challenges

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".

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.