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

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 (selectorbrightnessThreshold) {
    var elements = document.querySelectorAll(selector); //find all UGC elements
    for (var i = 0i < elements.lengthi++) {
        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 = 0len = sel.rangeCounti < 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.


'Product update: Jitbit Helpdesk Gets a Dark Theme' was written by Alex Yumashev
Alex Yumashev
Alex has founded Jitbit in 2005 and is a software engineer passionate about customer support.


Subscribe comments

Brought to you by

Help desk software

Jitbit Helpdesk