Describe the bug
On 3.10.3 the toggle button is no longer visible.

To Reproduce
Steps to reproduce the behavior:

1. Add CSS
2. Try to toggle dark mode

Expected behavior
Toggle button appears

Desktop (please complete the following information):

• OS: Windows 10, arch linux
• Browser, firefox, and using rocketchat desktop app
• Version: server 3.10.3

Additional context
I am also making my own custom CSS for my server, if any of the developers of this would be willing to message with me, I have questions about things I can't figure out how to fix in my own CSS.

Describe the bug
Inline tables (via markdown) are unreadable with light text on light background.

To Reproduce
Steps to reproduce the behavior:

1. Switch to dark mode
2. Switch markdown parser to marked (Admin -> Message -> Markdown)
3. Enable Marked Tables
4. Post a table into a channel:

test | bla
--- | ---
something | foo

4. See that the table is unreadable

Expected behavior
The table to be readable

Additional context
This additional CSS fixes the issue for me (probably would need some touching up to fit with the rest of dark mode):

body.dark-mode .message .body > table thead tr {
    background-color: #222;
}

body.dark-mode .message .body > table tr {
    background-color: #555;
}

body.dark-mode .message .body > table tr:nth-child(2n) {
    background-color: #444;
}

Describe the bug
the theme switch button is gone again in rc 3.10
To Reproduce
Steps to reproduce the behavior:
install rocket 3.10 and you see it right away

Expected behavior
it should be visible again

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version unclear, its within ferdi

Smartphone (please complete the following information):
n/a

Additional context
n/a

Describe the bug
When you select the '...' options menu beside a channel or private discussion, a dialog appears with options such as 'Hide', 'Mark Read', etc. This dialog is still white rather than being styled dark.

To Reproduce
Steps to reproduce the behavior:

1. Click on the '...' options menu beside any channel or private discussion.
2. See the lack of dark mode

Expected behavior
These dialogs should be styled dark.

Screenshots

Describe the bug
Dark Mode Toggle Button is gone in Rocket.Chat 3.9.0

To Reproduce
Steps to reproduce the behavior:

1. Update to Rocket.Chat 3.9.0.
2. Toggle Button is gone.

Expected behavior
Toggle Button should appear in the UI.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser: Rocket.Chat Client 3.0.7, Safari 14.0

Describe the bug
The user details modal is not styled dark.

To Reproduce
Steps to reproduce the behavior:

1. Click on a user's name in the main chat window.
2. See for yourself.

Expected behavior
The modal's background should be dark.

Screenshots

Typically, the dark mode cookie triggers the style by default, but this appears to have been reversed. Our server runs 3.4.2.

Describe the bug
The sidebar in the administration screen is white.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Administration'
2. See for yourself

Expected behavior
It should be styled dark. It doesn't have this effect if you're using the 3.7.2 branch (though of course this introduces other problems).

Screenshots

Describe the bug
The sidebar has been redesigned on 3.8.0-develop (commit edda351)

To Reproduce
Steps to reproduce the behavior:

1. Update rocket.chat to the develop commit edda351.
2. 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...

Currently Rocket.Chat aligns all message on one side. Many people prefer the classical way of messengers where own send messages are on the other side.

I wrote some CSS/JS to change the alignment.

Would you be interested in merging and maintaining such a feature?
(currently only 70 lines of CSS (not 100% working though), JS is just like darkmode)

These colors don't work--i can't tell who is logged on or off!

Describe the bug
The login page doesn't look right when in dark mode. It looks fine in light mode. Forgot your password and Register a new account links are black text on dark gray background and barely visible. The login box is very dark gray on a bright gray almost white background. I think login page is missing css styles completely for dark mode.

To Reproduce
Steps to reproduce the behavior:
Go to rocketchat is browser. Be logged out. Change to dark mode. Click on a channel and then click login and its unstyled.

Screenshots

All browsers.

Describe the bug
Dark theme is not supported on rocketchat 3.8.0 (development)

To Reproduce
Steps to reproduce the behavior:

1. Install RocketChat 3.8.0 (Development)
2. Click on 'Administration-Layout-Custom CSS'
3. Set the contents of dark-mode.css
4. click on Custom Scripts > Custom Script for Logged In Users
5. Set the contents of dark-mode-toggle.js
6. Save changes
7. No changes in the theme . Not even the Dark / Light button doesnt appear

Expected behavior
Toggle Theme button appears and User should be able to set Dark / Light themes

Desktop (please complete the following information):

• OS: WSL Ubuntu 20.04
• Desktop Version Windows 10 - 20H2
• Browser : chrome
• Version 86.0.4240.111 (Official Build) (64-bit)

I use rocket chat often with it's embedded layout. I would love to have the ability to toggle light/dark in the Room Actions as that is the only toolbar available in this mode.

The administration page doesn't display correctly in dark mode in version 3.4.2. Drop down boxes for settings are almost impossible to read with dark mode enabled. The left side menu is no longer dark when dark mode is enabled.

The new version of rocketchat highlights each line of text in the chat channels that the mouse cursor is over. This causes it to display as white background on white text onhover which makes it unreadable.

Please & Thank You!

I'm not sure if this can be fixed in the context of this mod, but each time I restart RocketChat I have to re-enable night mode. I.e. the setting isn't being saved between sessions. Any ideas?

Also, have you considered upstreaming this feature? I'd love to see this in the core release

Describe the bug
Hovering over a message shows a white highlight

To Reproduce
Steps to reproduce the behavior:

1. Go to 3.8.0-develop
2. Hover over a previous message
3. ????
4. Profit?

Expected behavior
Using the dark theme I would expect this to be dark themed as well.

Screenshots
https://imgur.com/YJB7i03

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 86

Additional context

• Also happens on the electron desktop app

Describe the bug
Toggling dark mode on and off switches between black and gray instead of black and white.

To Reproduce

1. Go to the admin settings > layout
2. Copy and paste in the CSS Code in the Custom CSS Field
3. Copy and Paste the custom script into the "logged in users" field
4. Perform a hard refresh on your session (CTRL + F5)
5. Toggle the darkmode using the new menu option

Expected behavior
The black style should enable on darkmode and the white default should enable on light mode

Screenshots
If applicable, add screenshots to help explain your problem.
Dark: https://cdn.foxybots.xyz/4Eo8wT
Light: https://cdn.foxybots.xyz/eHZfxH

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 80.0

Additional context
Assuming the light version is the one that is supposed to be toggled as dark, then I just need to figure out how to make the other option toggle to the default scheme (as the pure black one is very buggy, such as hovering is white on white)

Login Page Doesn't Display Correctly When Dark Mode Is Enabled

If you turn on dark mode before logging in, the colors for the login page are messed up and look bad. It looks fine after login. It also looks fine before login if you haven't yet enabled dark mode.

Version of RC 3.1.1
Directory search field text not contrast

Here is test search query

Describe the bug
In the newest version the text color of embeds/attachements is the same as the background color.

To Reproduce
Look at any message with an attachement.

Expected behavior
The text should be readable

Screenshots

Desktop (please complete the following information):

• OS: Win10/Kubuntu 18.04
• Browser Chrome/Electron App
• Version newest

Describe the bug
Looks like in latest RocketChat Server 3.11.0 the online badge icon is not visible in direct chat window.

To Reproduce
Steps to reproduce the behavior:

1. Open any directchat
2. Look at the top in front of complete name, there's no online badge icon

Screenshots
Active Darkmode

Active Lightmode

Desktop (please complete the following information):

• OS: MacOS 11.1
• Browser: Google Chrome 88.0.4324.9
• RocketChat Server Version: 3.11.0
• RocketChat Client Version: 3.1.1

Additional context
Offline Badge is visible :)

Describe the bug
The color of cited message is not rendered in dark mode

To Reproduce
Steps to reproduce the behavior:

1. Cite a message
2. switch to dark mode

Expected behavior

Screenshots

Desktop (please complete the following information):

• OS: Win
• Browser Firefox
• Version 85

Describe the bug
The text in drop-down lists is not readable, because the fontcolor is the same as the "dark" color

I did saw it on 2 occoccasions, file-types and member filter.

To Reproduce

1. Enable Darkmode
2. Open Chat or Channel
3. Choose files top right
4. Click on file-types box all to choose between all/videos etc.

Expected behavior
The text should be readable -> fontcolor: white

Screenshots

Versions:

• PC Client, Windows: 2.17.2
• Chrome, Windows: 84.0.4147.105
• RocketChat Server: 3.4.2 (latest Snap)
• rocketchat-dark-mode: latest master 5410abb (and previous)

Describe the bug
The user presence status icon color is overridden with the dark theme background color

To Reproduce
Steps to reproduce the behavior:

1. In RC > 3.5 click a users name in the channel window
2. Observe the user card that pops up

Expected behavior
The modal pop-up user card should have a colored presence status icon as it does in "light mode"

Screenshots

Additional context

I've spent some time trying to target and fix this but have run out of ideas.

This is caused from the styles "body.dark-mode .rcx-box" which is used as a generic catch-all that catches a bunch of areas, i tried targeting the presence icon with a ":not()" selector but CSS doesn't support enough complexity to target this (as there's no class name on the presence icon). So I'm a bit stuck as to how to target it.

Overwriting the generic "body.dark-mode .rcx-box" class with more specific would be possible, but seems like it would require a lot of definitions.

Hoping someone smart here can think up a simpler solution!

Room info not contrast

Notifications Preferences too

Can the hover menu on the messages be themed?

3.5.1 has this, not sure when it first showed up.

Describe the bug
On the initial splash page/login page of rocketchat the Register and Reset password buttons are completely hidden.

The buttons are still there and clickable but hidden as white on white.

To Reproduce
Steps to reproduce the behavior:
Installed the theme as advised on your readme and set (though don't know if this is the root cause, that is the only thing I changed):

const darkModeDefault = true;

in Custom Script for Logged In Users section.

Expected behavior
Reset Password and Register New Account buttons visible like usual.

Screenshots

Desktop:
It seems to not happen 100% of the time, though being visible seems to be the exception and most users make the complaint they could not see it and I have to instruct them on how to click the hidden Register button. I tried on both Firefox v75 and Chromium Version 81.0.4044.129 (Official Build) both on Arch Linux (64-bit) and not visible for me in either case.

One member said they could see it when signing up via desktop Mac on chrome.

Another user on Chrome on Windows could not see it.

Smartphone (please complete the following information):
Do not specific data on their devices but it is happening for most users and I know some of them are using mobile to sign up and one complained last night of the same issue.

Additional context
None.

I would do this myself in a PR, but I'm busy at the moment...but here's everything you need to know:

When disconnected, the reconnecting alert text is white in dark mode. Normally, it looks like this:

Unless we'd like to make the alert dark, the text should be returned to its color (#444). Perhaps this can be applied to the connection-status or alert class:

Describe the bug
In latest 3.9.1 version toggle dark mode button is not visible.

In dev tools an error appear

Exception in template helper: SyntaxError: Unexpected identifier
    at executeCustomScript (https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:424:638201)
    at Object.CustomScriptLoggedIn (https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:424:643372)
    at https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:219:31512
    at https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:219:17259
    at https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:219:32146
    at Function.t._withTemplateInstanceFunc (https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:219:38048)
    at https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:219:32052
    at p.call (https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:287:1933)
    at p.mustacheImpl (https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:287:1188)
    at Object.p.mustache (https://chat-dev.czk.comarch.com/8d746fcd4cb6ce22d8bccecde4fe5bf0ad83581e.js?meteor_js_resource=true:287:1247)

To Reproduce
Steps to reproduce the behavior:

1. Update to 3.9.1 server version
2. Toggle dark mode button is not visible

Expected behavior
Button is visible

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Desktop client
• 3.0.4

Smartphone (please complete the following information):
n/a

Additional context
n/a

Invite users text not contrast

I have a fix for that

Describe the bug
scrollbar-thumb almost invisible.
It's not a dark mode issue, it's Rocket Chat itself issue
I want to fix that in dark mode CSS

To Reproduce
Steps to reproduce the behavior:

1. Go to sidebar
2. Try to scroll up and down
3. Scrollbar thumb almost invisible

Expected behavior
Visible scrollbar thumb

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 85

Smartphone (please complete the following information):

• Device: Xiaomi Mi 9 SE
• OS: Android 10
• Browser Chrome
• Version 85

Additional context
I have a fix for that

Describe the bug
Multiple Dark mode icons appears

To Reproduce
Steps to reproduce the behavior:
I know for sure when you edit dark-mode-toggle.js in Custom Scripts > Custom Script for Logged In Users this happens.
But now I didn't edit anything, but have a lot of icons
CTRL+R in desktop client or F5 in browser version fix the problem for a time

Expected behavior
Only one Dark mode icon should remain all the time.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 2.17.3

The tooltip for the dark mode toggle button is only in English and Russian. In any other language setting it stays in English.

It'd be great for users who are native speakers of the other languages offered in RocketChat to add translations to the tooltip to dark-mode-toggle.js. We need translations for:

• German (#45)
• French (#102)
• Spanish (#83)
• Italian (#126)
• Dutch
• Polish
• Portuguese (#51)
• Chinese (#160)
• Hebrew (#55)
• Hindi (#68)
• Hungarian (#70)

NOTE: This list is not exhaustive. If your language is not in this list, please add it anyway!

P.S. Google Translate is not what we're looking for. "Toggle Dark Mode" isn't communicated the same in other languages. It'd be best for it the tooltip text to read naturally to native speakers, rather than a possibly robotic-sounding translation by Google.

Describe the bug
Show more button contrast issue

To Reproduce
Steps to reproduce the behavior:

1. Go to Members List of channel with more that 100 users
2. Scroll down to 100 user
3. See no contrast button show more

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 2.17.7

Describe the bug
The buttons in the top menu of the sidebar for dark mode, home, search, etc. are pretty spread out weirdly (at least on smaller screens; haven't yet confirmed this is still happening on larger screens).

To Reproduce
Steps to reproduce the behavior:

1. Take your eyes and put them on the top left corner of your screen when Rocket.Chat is open to the main chat.

Expected behavior
These buttons should be spaced better.

Screenshots

Currently when you create a string substitution in the code syntax you get a very dark color, almost impossible to see. E.g.

```python
f_string = f'{this currently is unreadable in dark mode}`
```

The CSS class for this is "hljs-subst", I've tested it as white and it looks fine, maybe it would be nice as another light color.

Describe the bug
Unread message indicator of Threads is invisible in Dark mode

To Reproduce
Steps to reproduce the behavior:

1. Make a Thread
2. Get unread message in thread
3. There is no blue dot (unread message indicator) in dark mode
4. In normal mode all fine

Expected behavior
Blue dot should be visible

Screenshots
Normal mode

Dark mode

In main windows all fine - blue dot visible

Desktop (please complete the following information):

• OS: Windows 10
• Browser Desktop RC version
• Version 2.17.7

Additional context
Server 3.6.3

Describe the bug
Previously (and still in light mode) when you hover or select a channel or direct message, it is highlighted in some way.

To Reproduce
Steps to reproduce the behavior:

1. Hover over any of the channels or direct messages in the sidebar
2. See that there is no hover or active style (without dark mode, there is)

Expected behavior
There should be hover and active highlighting as there is in light mode.

Screenshots

With highlighting in light mode (from top to bottom, no hover, active, and hovering):

Same setup but with dark mode:

Desktop (please complete the following information):

• OS: MacOS Catalina 10.15.7
• Browser: using Rocket.Chat desktop app
• Version: server 3.9.3

Dark mode icon is not being displayed in last R.chat versions

Any idea to make this fantastic feature upstream available within rocket chat by default?

That would be really nice. Please, consider doing/trying so.

Regards,
Melroy

Describe the bug
When you select to hide a private discussion with another user, a confirmation dialog appears. It's still got a white background, rather than a dark one.

To Reproduce
Steps to reproduce the behavior:

1. Select the options '...' beside any private discussion with another user.
2. Click on 'Hide'
3. See the blindingly brilliant white dialog appear

Expected behavior
This dialog should be styled dark.

Screenshots

This hover menu for messages appears to be transparent now, should be opaque (with one of these gray colors).

I don't think it much matters with RocketChat, but this in on Firefox in Windows 10.

Describe the bug
Mentions of the group or the current user (mention-group and mention-me) have blue text because all links are being styled blue. These have had white text in the past and all they need is a rule added to the stylesheet to override the general link rule (right now there's just a variable declaration for the color).

Expected behavior
Group- and me-mentions ought to have white text as before.

Screenshots

If you have E2E encryption enabled, its difficult to close blue bar at the top because the X is invisible in dark mode.

Whenever you have E2E encryption enabled and first join a channel/server it will have a blue bar at the top of RocketChat reminding you to store your encryption key. Usually there is an X at the top right side you can click to close this. This X is invisible while dark mode is enabled. I can still close it because I know where X should be, but to new users not familiar with RocketChat this will be difficult to find for them. Please make the X visible again.

Describe the bug
The left-hand panel text becomes white in dark mode, making it hard to spot the difference between read and unread messages.

To Reproduce
Steps to reproduce the behavior:

1. Have an unread message.
2. Click on the Dark Mode toggle to enable Dark Mode

Expected behavior
Historically, this styling on the left panel hasn't changed in dark mode, because this panel is already dark, and we don't modify its color any further in dark mode.

Screenshots
Normal:

Dark Mode:

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox 84.0.2
• Rocket.Chat Server Version: 3.9.3

I wanted to see if there is a way I can change the panel that shows the channels and direct messages to be the same color as the conversation background?
By the way, thank you for this. LOVE that the user now has the option to switch between the dark mode and regular.

Describe the bug
There is a poll app https://github.com/sampaiodiego/rocket.chat.app-poll
And create a poll in Dark mode looks not so good

To Reproduce
Steps to reproduce the behavior:

1. Install https://github.com/sampaiodiego/rocket.chat.app-poll
2. Create vote

Expected behavior
All respect Dark mode

Screenshots

As you can see - whole windows is white.
Header - not good
Drop down list - not good

Desktop (please complete the following information):

• OS:Windows 10
• Browser 81
• Version 2.17.9

This is just an observation and maybe there is an easy fix for this display change request. With Rocket Chat version 3.4.1 I have noticed that when you enable dark mode, any posts in a channel when you mouse over switches to a white background with white text making it unreadable. Links are ok as they are blue.

Options to fix would be to either have a dark grey highlight on mouse over, or switch the text to black on mouse over. I'd prefer the dark grey background as white is just so jarring when using dark mode.

If anyone knows the location in the CSS to change the mouse over highlight background I will test and report back.
Thank you.

Describe the bug
I see some contrast issues after we updated our server to version 3.0.2

To Reproduce
Steps to reproduce the behavior:

1. Open channels Member List
2. Click Add users button
3. Start input in Invite Users field
4. See contrast error on input test

Expected behavior
Text must be white

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome 80
• Version 2.17.7

Additional context
RC server version 3.0.2