Skip to content

An easy user-togglable dark mode for Rocket.Chat

License

Notifications You must be signed in to change notification settings

pbaity/rocketchat-dark-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rocketchat-dark-mode

An easy user-togglable dark mode for Rocket.Chat

This repo was migrated for ease of collaboration from my gist which was a fork of chall8909's gist, to which this project is greatly indebted.

Overview

dark-mode-toggle.js creates and adds a click handler for a dark mode toggle button. This toggle button lives in the toolbar at the top of the left-hand sidebar:

Toggle dark mode on with moon icon

And when dark mode is active:

Toggle dark mode off with sun icon

dark-mode.css contains the styles which - y'know, make everything dark, like so:

Dark mode in action

Installation

If you want to "install" this dark mode, here's all you need to do:

  1. Be an administrator of your Rocket.Chat instance, or send these instructions to one and pester them to do it for you
  2. Go to the Administration panel > Settings > Layout
  3. Copy the contents of dark-mode.css into Custom CSS
  4. Copy the contents of dark-mode-toggle.js into Custom Script for Logged In Users (third field) under Custom Scripts
  5. Refresh your local Rocket.Chat instance (a server restart is not required). You may need to clear your cache if using a web browser.

NOTE: This repo aims to keep the dark mode working for the latest stable release of Rocket.Chat. Older versions may or may not work.

Rocket.Chat version(s) Branch to use
latest stable master
5.0.0 - 5.3.5 5.3.5
4.7.5 - 4.8.2 4.8.2
4.2.3 - 4.7.4 4.7.4
4.0.0 - 4.2.2 4.2.2
3.11.3 - 3.18.3 3.18.3
3.9.2 - 3.11.2 3.11.2
3.8.0 - 3.9.1 3.9.1
3.4.0 - 3.7.2 3.7.2
3.2.2 - 3.3.3 3.2.2

Contributing

If you encounter any problems with this dark mode plugin, please open an issue - or better yet, fix it and open a pull request.

See the contributing guidelines.