Rocket.chat: Theme as a per-user configuration

[tmr232]

Themes should be configurable by each user for himself, and not only as a global, administrative theme.

[ant31]

Themes is part of a group/project/company identity and I don't want my users to change it.
So I would suggest it's at least lockable.

[whitelynx]

At the very least, having a way for a user to switch to a dark theme if desired would be nice. I run all my apps with dark themes and use Stylish to restyle websites with dark themes, since I often work in a darker environment, and bright screens are hard on the eyes. The problem for me currently is that the standalone app doesn't allow for me to control the theme just for my user, and I can't use Stylish there, so my only option would be to change the theme for all users on our Rocket.Chat instance.

Right now, this is actually a bigger issue for me because my fiancee just had eye surgery, so she's very light-sensitive. Having my laptop screen suddenly flashing a bright color because I happened to switch over to the Rocket.Chat window can sometimes be painful, and I'd like to avoid that.

[MarcinSkoczylasSH]

Themes are not part of my group/project identities and I want my users to be able to change it :-)

[HammyHavoc]

Chiming in with regards to my recent tweet: https://twitter.com/hammyhavoc/status/930826573070110720

@RocketChat Is it possible to have users select a theme that shows solely for them? A colleague is legally blind and has specific requirements for the UX colors to be legible. If possible, happy to contribute the theme to the repository and invite feedback from other blind folk!

I agree that the ability to change themes should be permission-based; some people aiming for brand consistency would obviously prefer it, but I feel that my particular usage scenario for blind users, and for those who prefer a dark UX as it's easier for long-term usage, that it's a valid option as accessibility is increasingly important, and IMO, that should probably take priority over brand consistency.

As some additional insight; a dark background with white text on top ala Discord is what our blind colleague finds easiest to use. The default bright RocketChat is nigh-impossible for him to read whilst scanning his eye over it.

[rodrigok]

We should have a Theme system with 2 default ones (light and dark) but been able to create another ones. With that we could allow users to select among theses themes.

[redzioch]

+1

[edvinassabaliauskas]

For those who can't wait for the feature: https://gist.github.com/edvinassabaliauskas/a3f5650ffbda9d4cd5e988c33c3dcbff
See comment for instructions.

[chall8908]

Building on @edvinassabaliauskas's idea, I slapped this together: https://gist.github.com/chall8908/c03dd6cc443cdb9cbb7034d441a1350d

I wanted the toggle to be in the top toolbar and I'd wanted to try using the built-in custom CSS options. The JS for this is very simple and uses localStorage to keep track of the toggle state of the dark mode.

If I knew how to SVG, I'd probably make little sun and moon icons to use instead of just the letter 'D', but it works.

[adam-kosseck]

@chall8908 your theme doesn't appy to the sidebar or the admin menus.
Text in the sidebar (e.g. user list) becomes unreadable.
Still it's a huge improvement over vanilla :)

[chall8908]

@adam-kosseck I was really confused for a moment because my sidebar looks fine, but then I realized you were talking about the drawer on the right not the static sidebar on the left.

Also, make sure you're using the latest version of the CSS. I've updated it for the admin panel already so that it _mostly_ works - at least, on the menus I checked.

EDIT: Drawers should be fixed now.

[Routhinator]

@chall8908 Looks great, in my instance the thread drawer is not fixed, but all other drawers work. Trying to work out what's missing.

[adam-kosseck]

I noticed a fork of the dark mode script by @chall8908 was available - https://gist.github.com/pbaity/73beb1dd11fdc8b90e4ee032f1b3f7de

This fork appears to work better in our environment, as all of the drawers are now rendered in dark mode (e.g. conversation threads & room info).

[brittyazel]

@adam-kosseck Thanks so much for the link!
The GNOME Foundation is also using this mod:
https://github.com/pbaity/rocketchat-dark-mode (the same one @adam-kosseck listed above) minus the change to the height to the logo icon.

I would LOVE something like this to be added as stock. The code listed in this repo already works super well as is, and with minor revisions to things like the contrast between popover menus and the background on the left sidebar, I think it would awesome if this was pulled in as core