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...
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:
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".
And then we use this method to "unstyle" all elements with brightness lower than "80".
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:
Long story short, that's why the feature is still experimental (as in "beta"), so please report any bugs and inconsistencies.
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.
Alex has founded Jitbit in 2005 and is a software engineer passionate about customer support.