linusg / rocketchat-dark

🌒 Dark Userstyle for Rocket.Chat

rocketchat-dark

Dark theme stylesheet for Rocket.Chat

Why?

Because everything needs a dark theme. And because Rocket.Chat has no dark mode yet, except for the iOS app.

Installation

You can either install this as a user in your browser or as an admin globally for your Rocket.Chat installation.

Browser

• Install a Userstyle-Addon like Stylus (Firefox, Chrome)
• Create a new style and copy the content of style.css into it

Make sure to restrict the scope of the style to the domain of your Rocket.Chat installation.

Rocket.Chat

• Go to Administration → Layout → Custom CSS
• Copy the content of style.css into it the Custom CSS field
• Click Save changes at the top

More Screenshots

TODO

This theme is not finished yet. It's usable but the admin interface and other parts will remain light.

rocketchat-dark's Issues

Missing style classes for .own and code-colors

Thank you for this ! It's really useful to avoid complete white page in Rocket Chat.

However, there was some classes missing which were quiet useful in my case (I don't know which rocket version my company uses so I'm not sure it's for everyone).

For code-colors, I added this to have a darker color on highlighted words

.hljs-keyword, .hljs-selector-tag, .hljs-subst {
    color: #777;
    font-weight: 700;
}

For .own messages, I added this because every message of my own was light :

.own, .own .body {
    background-color: var(--color-dark);
}

And for tags:

.message .title .role-tag {
    background-color: var(--color-light);
}

I didn't make a PR because I think this is not the best colors to change.

Thank you !