Dark Mode not supported in Rocket.Chat version 3.8.0-develop
bkraul opened this issue · comments
Describe the bug
The sidebar has been redesigned on 3.8.0-develop (commit edda351)
To Reproduce
Steps to reproduce the behavior:
- Update rocket.chat to the develop commit
edda351. - The dark mode icon goes away.
Expected behavior
The dark mode icon should reflect the new design changes.
Desktop (please complete the following information):
- OS: Windows 10 2004
- Browser: (Rocket.chat Electron Client, chromium)
- Version: 3.04
Additional context
The sidebar has apparently been re-developed, using different class names. This, of course throws the whole dark mode customization off. I tried jimrigging the script to target the right element classes, and I manage to make the button appear and apply the theme, but there are way too many classes, some that affect status colors and whatnot. I am afraid we might be needing another branch for this, which eventually can become master...
I've created a 3.8.0 branch so we can prepare for the official drop of 3.8.0. But as a comment to anyone finding this issue, technically I only intend to support "official" (i.e., non-development) versions of Rocket.Chat with this dark theme. Development versions can change so much and so quickly that promising support of them would be much more difficult than I can manage.
That being said, I appreciate @bkraul and others finding this issue in advance so the community can chip away at it before it is released and everyone gets a big surprise. I will also take a look at it as I'm able. Anyone can discuss and relate PRs to this issue.
@pbaity Understood. Thing is, though, the rebranding and redesign of the sidebar is eventually going to come to official. And from experience, that transition does not take long at all.
Thanks for creating the branch, by the way.
Yes, agreed. We should not wait until the code in any development branch becomes "official" to begin fixing the CSS and JS to work with it. I just want to frame the expectations of the community so users will understand that the dark theme is not 100% guaranteed to work if they choose to use a development branch for their Rocket.Chat instance. If the Rocket.Chat branch is in development, so is the dark theme 🙂
In the near future I will update the README to clarify this. As you (or others) find fixes for 3.8.0-develop, we'll add them to the new 3.8.0 branch and hopefully be ahead of the game when it is officially released.
Just PR'd a "quick and dirty" support for 3.8.0. Most things look ok, basically the point is to leave the sidebar alone and focus on the .main-content class because without filtering some things, the sidebar gets broken pretty bad. This, hopefully until a proper fix is put in place. A few of the side-effects are that the admin sidebar shows up as light:
But for the most part, it looks OK:
Rocket Chat 3.8.0 seems to work when correctly applied 3.8.0 branch.
My Rocket.Chat instance got upgraded to 3.8.1. The 3.8.0 branch fixes some issues I saw, but it looks like the background color on the sidebar (both in main chat and admin) was correct:
I've created a 3.7.2 branch to save the currently-working styles for previous versions. We can begin the process of fixing the 3.8.0 branch in new issues and then merging it into master.