Dark Theme improvement & fixes for RocketChat 3.11.0

[TBG-FR]

A lot of modifications, especially on breaking changes, or some forgotten parts (also, some rules were too extensive) :

• Dark Theme for all modals
• Dark Theme for dropdowns (select, options)
• Modifications on sidebars, buttons, icons, etc. to get the same behaviour as we have in normal/light theme

I tried to separate each modification in a commit, so it can be easily reverted/reviewed if needed.

Feel free to add improvements or remarks 😉

[brunobertoldi]

Chat and sidenav have multiple fixes! :star_struck: But, on administration pages, many descriptions are unreadable because of contrast ): I think I can help with this later!

[pbaity]

@TBG-FR These look great. Merging a previous PR caused a minor conflict - I was going to fix myself but I noticed also that this block:

body.dark-mode .highlight-text {
    background-color: var(--color-blue);
}

occurs after this one:

/* This CSS block is used to counter RocketChat's bug which crop the end of custom CSS. */
.dummy-entry {
    color: whitesmoke;
}

I think the intention is for the dummy entry to come last, correct? If you want to resolve this and the minor conflict when you have a chance to make sure I don't accidentally change anything, I will merge.

[TBG-FR]

Chat and sidenav have multiple fixes! 🤩 But, on administration pages, many descriptions are unreadable because of contrast ): I think I can help with this later!

You're right, I need to fix the administration pages !

[TBG-FR]

I added a quite simple fix for Admin Panel, tell me what you think ;) (it could probably be improved but that should be a good and sufficient base)

[brunobertoldi]

Nice! It's better! I think the background needs adjustment but Administration is accessible!

[pbaity]

@TBG-FR Thanks for all the fixes! I'm going to get these initial fixes into master now, any further ones can come in separate PRs.

[TBG-FR]

Nice! It's better! I think the background needs adjustment but Administration is accessible!

Thanks !

Yeah, if we modify the bottom part it also changes the background of the sidebar, so we'll have to modify the whole sidebar in order to turn it Dark, but we can do it !