Skip to content
A dark Discord-inspired theme for Rocket.Chat.
Branch: master
Clone or download
Latest commit a9cb9aa Jan 18, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.

A dark Discord-inspired theme for Rocket.Chat


Manual install

  1. Copy the contents of dist/dark.css or dist/dark.min.css
  2. Go to Administration > Layout in Rocket.Chat
  3. Paste the copied contents into "Custom CSS"

Automatic install

  1. npm install
  2. npm run deploy

Custom additions

Custom styling that can't or shouldn't be in source control goes in src/custom.styl. src/custom.styl should have @import "dark" as the first line.

If you use this, you'll need to run the build or development steps below and copy dist/custom.css to Rocket.Chat instead of dist/dark.css. If you use deploy instead, it will automatically choose the custom file if it exists.

For example, I use this to color the names of specific users. My src/custom.styl looks something like this:

@import "dark"

[data-username="user1"] .user
	color some-color

[data-username="user2"] .user
	color some-other-color

App color settings

All colors should be set to the defaults. I haven't tested with anything but the defaults (except for the background color; see the next heading).

Background color of the mobile bar

To color the background of the top bar in mobile, you should set the "Primary Background Color" under Administration > Layout > Colors. To set it as the primary background color this theme uses (recommended), set it to #36393e.


  1. npm install
  2. npm run build


  1. npm install
  2. npm run watch
  3. Edit source in src


Rocket.Chat.Dark screenshot

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.