A dark Discord-inspired theme for Rocket.Chat
- Copy the contents of
- Go to Administration > Layout in Rocket.Chat
- Paste the copied contents into "Custom CSS"
npm run deploy
Custom styling that can't or shouldn't be in source control goes in
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
npm run build
npm run watch
- Edit source in