Miscellaneous Stylus
On branch current
Latest: ???/cur
Running: a9cb9aa (v2.0.4)
??? commits behind

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