search

pbaity / rocketchat-dark-mode

An easy user-togglable dark mode for Rocket.Chat
MIT License
369 stars 126 forks source link

Modifications for 5.0.0 #190

Closed TBG-FR closed 1 year ago

TBG-FR commented 1 year ago

This PR aims to solve (almost) all issues found in RocketChat 5.0.0. As always, some (generated, and regular) classes changed, breaking some elements.

Related : #189 - Thanks for reporting these issues 👌

Don't hesitate to leave your thoughts 😉

Mattsky commented 1 year ago

Just tried on Windows desktop client v3.8.7 and web browser, the toggle button doesn't work for me. (Server version is 5.0.0 just to confirm.)

Mattsky commented 1 year ago

Could this be related? Pulled from logs:

Jul 27 20:44:03 XXXX rocketchat[2555171]: {"level":50,"time":"2022-07-27T20:44:03.370Z","pid":2555171,"hostname":"XXXX","name":"rocketchat:theme","err":{"type":"LessError","message":"Unrecognised input","filename":"input","index":5109,"line":184,"callLine":null,"column":42,"extract":["\t/* Tags */","\t--rcx-tag-colors-default-background-color: var(--color-dark);","}"]},"msg":"Unrecognised input"}

Mattsky commented 1 year ago

Yup, missing semicolon on line 181. Seems to have fixed it!

TBG-FR commented 1 year ago

Yup, missing semicolon on line 181. Seems to have fixed it!

Good catch !

KeysBytes commented 1 year ago

the Admin label is also dark now :P

TBG-FR commented 1 year ago

the Admin label is also dark now :P

Looks like I modified a value (--rcx-tag-colors-default-background-color:) that also affect roles, you're right ! I fixed it, commit is on its way 😉

ankar84 commented 1 year ago

Checked all what I found broken before and now all that is fixed by this great PR! Thank you @TBG-FR for your fantastic job!

aadilayub commented 1 year ago

Spotted a couple bugs:

image

image

image

TBG-FR commented 1 year ago

Spotted a couple bugs: [...]

I'll check and fix links and emojis !

About the role badges, I tried to modify CSS variables (colors) instead of elements one by one, so that's the expected look (based on RocketChat official design), is that an issue ? I found it readable 😅

aadilayub commented 1 year ago

it's definitely readable but imo stands out a bit too much in dark mode. In light mode the role badges are a darker version of the app background color, so maybe in dark mode they should be a lighter version of the background color?

EDIT: maybe something like this?

image

StefanIGit commented 1 year ago

Works for me, had to restart Linux Client 3.8.7, reload browser GC 103 with server 5.0.0. Nice Job :+1: :

TBG-FR commented 1 year ago

it's definitely readable but imo stands out a bit too much in dark mode. In light mode the role badges are a darker version of the app background color, so maybe in dark mode they should be a lighter version of the background color?

I agree, I'll see what I can do

ae5960e8-a6fc-491f-b252-898ecf59af95 commented 1 year ago

Great work. I'm getting into CSS, so I'll be able to chip in myself sooner or later. Some issues I noticed:

TBG-FR commented 1 year ago

✅ Link previews are dark on hover ✅ Emoji reaction boxes are white for the current user (other users reaction emojis have the appropriate dark box) ✅ Admin badges are white

TBG-FR commented 1 year ago
  • Hovering over a quote message (which starts with ">") is pure white, message unreadable.

I do not reproduce that 🤔 (maybe my recent modifications fixed it ?)

  • "Ok" button in the "Read by" menu of a message is incorrectly colored.

This button is missing the .rcx-button--primary class sadly

  • Image download button is blue. Is this intentional? I think it would look nicer in gray.

It is black for me (maybe my recent modifications fixed it ?)

  • Borders of images are pure white, they could be done away with entirely.

Fixed it ! ✅

  • Quote messages have a pure white line on their right when gray would be more suitable.

Fixed it ! ✅

  • In the admin panel "Settings" tab, the gray box containing the word "Settings" and search box should probably be set to the same color as the background instead of light gray.

Fixed it ! ✅

  • The dark them toggle button doesn't seem to be centred with the other icons, home, search, display, etc...

I noticed it too, I'll try to find a fix 🚧

  • In the "Directory" area, hovering over the tabs makes the tab text too dark to read. Also, the background of the tab box changes when it would be better if it stayed the same color as it is already.

Fixed it ! ✅

  • In the "Hide" menu when you choose to hide a chat, the "Cancel" button is wrongly colored.

Fixed it ! ✅

  • Should the message box be lighter than the background? I think it would look nicer as the same color as the background.

What do you mean by message box ?

  • Hovering over an emoji in the emoji picker highlights in pure white when it should be darker.

Fixed it ! ✅

  • Emoji skin tone switcher is wrongly colored.

I'll check this one later 🚧 Feel free to do it if you want !

  • Editing a message highlights the message in blue which is too bright.

Fixed it ! ✅

TBG-FR commented 1 year ago

image

ae5960e8-a6fc-491f-b252-898ecf59af95 commented 1 year ago

Nice

Hovering over a quote message (which starts with ">") is pure white, message unreadable. Fixed

Image download button is blue. Is this intentional? I think it would look nicer in gray. Fixed

Borders of images are pure white, they could be done away with entirely. Fixed

Plus the others you confirmed fixed are fixed

How do you find it editing the RC CSS? It's really complicated and bloated to me...

TBG-FR commented 1 year ago

How do you find it editing the RC CSS? It's really complicated and bloated to me...

I usually use Chrome/Firefox dev tools (F12) on RocketChat pages, that allows me to find and edit elements (and their rules/names) easily. Once I get a rule working, I put it in the css file, copy the whole css file in Admin > Layout and refresh the page(s) to check if everything is working well.

TBG-FR commented 1 year ago

@pbaity This PR is ready to merge, we'll be able to make another one for other small things that could be missing, I think 😉

TBG-FR commented 1 year ago

Thanks for all your hard work, it's looking great! I appreciate all the little fixes too in typos and such. If we can, let's not forget to follow up on any TODOs and commented-out rules that we may be able to remove. Once I update my main instance to 5.0.0 I can help with that.

I agree, we can clean some rules, comments and TODOs 🤞