The future of rocketchat-dark-mode after Rocket.Chat v6.0.0

[chotaire]

Hello all contributors and users,

as you may already know, Rocket.Chat features its own official dark mode now, it became available as a production feature in version 6.0.0 which has been released a couple of days ago. I only realized by accident while i was working on a PR for v6.0.0 as there are once again uncountable changes that broke the design. At some point I was wondering why some of my changes would not apply until I realized that I was fighting the official dark mode at the same time.

For those who are as baffled now as I was, the official dark mode can be toggled when clicking your own avatar icon in the upper left, you will find light, dark, use system defaults options. There is also an option in "default settings for all users" to set the theme, but this may still be buggy right now as I didn't see this have an effect on existing users.

After removing our project code from my v6.0.0 installation I realized that the official dark mode is actually really good by default, it is very coherent to the light mode design of Rocket.Chat and improves many design oopsies that still exist in this project. Long story short, it looks better than what we have created so far, with the exception of things that are not properly themed yet (such as code blocks in message view). Such issues will likely be fixed pretty soon in future Rocket.Chat releases.

Before Rocket.Chat v6.0.0, pbaity's rocketchat-dark-mode was a mandatory addon for so many of us, and I have to say thank you to everyone who helped make Rocket.Chat watchable during the past years. You are all great people with sensitive eyes!

The question I have about this project, and I would like to ignite a discussion about it, is how this project will move into the future. Now that there is an official dark mode in Rocket.Chat, what will this project become?

I could think of 3 possibilities:

a) Keep it alive and keep improving it for people who have to run versions of Rocket.Chat older than v6.0.0 for whatever reason. How many of you have to stick to older versions? Want to say hi and tell us your current status if you are one of those who can't upgrade?

b) Transform this project into an enhanced dark mode for versions of Rocket.Chat higher than v6.0.0. We build on what Rocket.Chat already offers to us, fix bugs, improve the design, also submit upstream. Making the official dark mode better, more beautiful, different. Is this an option you contributors could think of?

c) Abandon/archive this project for legacy releases of Rocket.Chat. Contributors submit patches to upstream Rocket.Chat when they are in the mood.

What ideas do you have? How would you like to go from here? I personally have already written a CSS patch for Rocket.Chat 6.0.0 fixing issues with their official dark mode and improving its look, and I have no idea where to submit it yet.

I don't know what you guys think about all this, but I am glad I no longer need to invest countless of hours to fix things after each Rocket.Chat release, it gives me a feeling of relaxation that the folks at Rocket.Chat now hopefully adapt their own dark mode before they release a new version, instead of breaking all our work again and again.

I hope you all find a minute to post your own ideas and thoughts. Have fun doing so!

[chotaire]

What could be done no matter what: Our rocketchat-dark-mode fights with the official dark mode starting with version 6.0.0, we would have to update documentation, readmes etc to let people know there is now an official dark mode.

Interesting: Everyone who's working on dark mode on a production instance of Rocket.Chat 6.0.0 should keep in mind that they might be logging out all Android phone users the moment they make changes to Layout -> Custom CSS: https://github.com/RocketChat/Rocket.Chat/issues/28444

[pbaity]

Like you @chotaire, I'm also relieved that Rocket.Chat has a native dark mode now. I've loved working with the contributors here to maintain this improvised dark mode, and the community has done a fantastic job keeping it up-to-date (seriously, all the credit goes to you all!), but my opinion from the beginning was that this project was like a temporary bug patch until an official fix was released. As such, my intention was always to archive this repository. Anyone using old versions of Rocket.Chat could still benefit from prior branches, but otherwise it would no longer be updated.

I still think this is the "right" option - if people want to contribute to the Rocket.Chat dark theme, it'd make the most sense to do that on their fork on the Rocket.Chat repo, not here. But I'm not in a rush, so I'll leave this issue open in case anyone else in the community wants to say anything. But in a few weeks I'll probably give this repository its well-earned retirement.

[chotaire]

If you are in a hurry, for everyone transitioning to Rocket.Chat 6.0.0 native dark mode (which is not perfect yet), I've hacked this together during the past days. Let me leave this as a gift to y'all to make things look as good as you were used to. Remove rocketchat-dark-mode from custom css and custom js and then add this to custom css. Feel free to use, submit wherever you want, do whatever you like with it. Should I find more stuff that hurts my eyes in 6.0.0, I might add it here.

/* hide new sidebar footer in v6.0 taking up way too much space */
.rcx-sidebar-footer {
    display: none !important;
}

/* input box highlighting border removal for v6.0, it simply doesn't look good */
.rcx-input-box__wrapper:focus-within,
.rcx-css-o7c782 {
    box-shadow: none !important;
    border-color: RocketChat/Rocket.Chat#666 !important;
}

/* v6.0 code blocks themed in dark */
.hljs-keyword, .hljs-selector-tag, .hljs-subst {
    color: #CCC !important;
}
.rc-old .code-colors {
    color: #CCC !important;
    border-color: RocketChat/Rocket.Chat#666 !important;
    background-color: #262931 !important;
}
.hljs-doctag, .hljs-string {
    color: #d0627e !important;
}

/* v6.0 unread messages notification bar themed in dark */
.background-component-color {
    background-color: #262931 !important;
}

/* v6.0 messages purge warning displayed at start of channel windows (if message purge configured) */
.messages-box .start .start__purge-warning {
    background: linear-gradient(180deg,#31363f 0,hsla(0,0%,100%,0)) !important;
}
.error-color {
    color: #d0627e !important;
}

[chotaire]

Here's something else I never submitted anywhere, I am sure some of you will enjoy it.

Just add the following to Custom CSS aswell:

/* beautified @mention nametags for dark and light mode */
@keyframes blinker-mention-me {
  0% {
    opacity: 100;
  }
  40% {
    opacity: 100;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 100;
  }
}
.mention-link {
    color: #fff !important;
    background-color: #f7a600 !important;
    text-shadow: -1px -1px 0 RocketChat/Rocket.Chat#666, 1px -1px 0 RocketChat/Rocket.Chat#666, -1px 1px 0 RocketChat/Rocket.Chat#666, 1px 1px 0 RocketChat/Rocket.Chat#666;
}
.mention-link--me, .message .mention-link--me {
    color: #fff !important;
    background-color: #ff4200fa !important;
    animation: blinker-mention-me 2s linear infinite;
}
.mention-link--group, .message .mention-link--group {
    color: #fff !important;
    background-color: #ff4200fa !important;
    animation: blinker-mention-me 2s linear infinite;
}

I had written hundreds of lines of additional beauty tweaks for rocketchat-dark-mode which I never submitted because improving Rocket Chat's design was never really a mission here. Interestingly, all of that has been designed atleast sufficiently well (or even better) in the new native dark mode of Rocket.Chat 6.0.0 so my additional changes can go to /dev/null now.

[Montg0mery]

Rocket Chat 5.4 LTS goes end-of-life in June 2023 according to this page: https://docs.rocket.chat/resources/get-support/enterprise-support#rocket.chat-versions

All other pre-6.0 versions are already end-of-life.

So my view would be that it would be good for this project to remain open for any bug fixes for this 5.4 dark mode code until the end of June, and then it could become read-only.

Thanks for all the hard work!

[chotaire]

Rocket.Chat has its very own understanding of LTS ;)

[vanois]

No matter what I do, in version 6.2 it is not possible to make text in a dark theme darker, the --rcx-color-font-default property changes the color in both dark and light theme. Does anyone know how to assign a separate color for each theme now? I think it's too early to close this repo, with such bugs/difficulties in official dark theme:)