Provide a way to create color themes and be server-wide or user-dependent

[bkraul]

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
The ability to create color themes and store them in a list that can be selectable per-user or server-wide. The current approach on customizing colors is very cumbersome. I am particularly interested in an easy ability to create a "Dark Mode" that users can set that does not affect the entire server. Also, the ability to "test" the color themes before applying them would be great.

Describe alternatives you've considered
I have tried customizing the colors, it is very complicated because of the cryptic way the colors are named, and how some colors are used in more than one area.

[grahhnt]

Something else that would be nice, is the ability to have colors per-channel

[Sparkrdom]

Bump to this! Highly requested from users.

[bkraul]

This is working great with few modifications/additions:

https://gist.github.com/chall8908/c03dd6cc443cdb9cbb7034d441a1350d

At least it offers a per-user dark mode toggle. I adapted mine to our company colors:

[Sparkrdom]

This is working great with few modifications/additions:

https://gist.github.com/chall8908/c03dd6cc443cdb9cbb7034d441a1350d

At least it offers a per-user dark mode toggle. I adapted mine to our company colors:

Yeah, I tested that for a bit, and works in a pinch. None of our staff know CSS, and while this is probably simple enough to modify, I'd still like proper theming options built into the software.

[keegandent]

Honestly this sounds nice, but just having a dark theme/mode is way more impactful to a typical user than a customized color scheme RocketChat/Rocket.Chat#11071

[tripout]

Rocket.Chat needs a dark/light theme options immediately to bring it into this century. All apps now a days have it and instead of having to resort to ugly css hacks or external scripts to do this it should be supported!

[pbaity]

I've been following the discussion on color themes and contemplating how they might work since my first day using Rocket.Chat. Maybe this is the wrong place for detailed ideas/suggestions, but here might be a solution that (mostly) appeases the three crowds I see around the issue:

1. People who want user-toggled dark (and true dark) theme with standard colors
2. People who want admins to control the colors (e.g., for company colors)
3. People who want multiple theme options, not just light/dark

Here's my proposal in a few parts, with some mock-ups I stitched together in Keynote:

1. Add "User Toggle Button"

This easily-accessible button allows a user to pick from several themes, which are immediately applied when selected. By default, there could be light, dark, and black themes, which is possible in the mobile app and is standard in many other apps. Something like this:

2. Add "Admin Theme Panel"

In Administration, offer a place for admins to customize these three main themes, remove or add themes, and disable themes entirely. Customization could focus on a set of colors (a dozen or so, maybe?) that can be changed with color pickers and choices would show in a preview/mock-up - this is basically an improved and condensed version of Administration > Layout > Colors. Here's a very, very rough and lazy example:

3. Coordinate and give control over all colors

From this comment in a PR to add a dark mode:

there are three competing ways to style Rocket.Chat at the moment -- a legacy LESS file, some non-standard components and the newest Fuselage

I'm not skilled with Fuselage (i.e., Storybook), but if that's the way to go, then I'd just like to see how it achieves creating the components to see if it's possible to link the color of components together (such that the red danger button and the red danger text are linked to the "danger color").

If this can't be done with plain ol' Storybook, then maybe a LESS file is the way to go, at least for the time being. And whatever we choose, "non-standard components" definitely need to be hunted down and standardized.

As long as the destination is that an admin can control the colors in a simple yet powerful interface, and a user can pick a theme from a drop-down, I don't particularly care how the journey towards it goes.

---

If anyone reads this and finds it doesn't capture what you want, I'd love to hear what it is. I'm hoping to try to work this out and contribute it if the Rocket.Chat team or someone better at Meteor doesn't beat me to it.

[melroy89]

As discussed on the pbaity/rocketchat-dark-mode#27 issue, I also really like to see a dark mode option.

Since there is already such a project successfully implemented this feature. I again encourage the rocketchat developers to merge this project upstream. Until you already have currently something working already, for the next release.

In all other cases: I would again bring this dark/light mode upstream which can always be extended/replaced by other GUI dark/light/multi color implementations. That would be the agile approach in my understanding.

[crdxfire]

it would be more than great, to see rocket chat aligned with other modern apps. the white background is really hard to concentrate on in a low light environment on my mac. compared to slack it's hard to keep the eyes on it.

of course, the color scheme doesn't affect how good it is working, but i personally would like to see a much more simplistic approach in regards to the overwhelming features within rocket chat and on the other side have an app by hand, that es simple to use and to read.

not sure, if this is a good way to describe what I or we want to see. the app should not take away the users attention.

cheers,
markus

[engelgabriel]

Just a sneak peek of what we are working on:

[stevyhacker]

This looks great, much better looking than the current default theme.

[whande1992]

any prevision?

[dstensnes]

Any chance of a small status update on this? Really looking forward to a native implementation :)

[Weuxel]

Please push this up the priority list.

[machine-without-the-e]

Happy to help if there's anything I could do :)

I've already made a cheap & dirty patch for dark mode & multiline messages: https://github.com/TheMeanMachine/betterRocket

[bkraul]

Just a sneak peek of what we are working on:

@engelgabriel Hey man, what ever happened to this effort? It's been over a year, just wondering where things were.

[ItDoBeNord]

This would definitely be handy and allows you to personalise it a lot more to your liking!

[maxwell-kalin]

since this issue is still open i decide for zulip or other projects supporting a dark mode

[fumin]

This implement looks great, please ship it AT ONCE!!!!!

[ghost]

Any updates on this?

[maxwell-kalin]

April 2022, still no dark mode???

[ItDoBeNord]

April 2022, still no dark mode???

Unfortunately.

[maxwell-kalin]

seemingly rocketchats UI is such a mess they could not change the theme in 3 years, i give up on this

[bkraul]

@ata-star true dat. @pbaity is filling the gap nicely for now with https://github.com/pbaity/rocketchat-dark-mode . It is a bit hacky but it does the job 🙂

[paulharris]

The pbaity darkmode doesn't work with the new version 5.
Our guys won't be upgrading to version 5 until there is a dark mode :(
Light mode burns the eyes...

[bkraul]

Not sure what iteration of pbaity's dark mode you are using, but his current master works perfectly with 5.0. I even now have 5.1-develop and been using it since 5.0:

[paulharris]

Hrm I'll give it another try, thanks!

[RedTail72]

@bkraul @engelgabriel Has there been any update on this? The white is hard on my eyes and would love to have something to conform to the OS theme.

[foss-]

Go to profile, then into home. Once that is open press ↑ ↓ ↑ ↓ ← → ← → t
Open user settings and select dark mode. It is not ready for prime time and RocketChat does not (yet) want any tickets about dark mode in the tracker, so please respect that, until they officially announce dark mode support.