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.