Skip to content

An easy user-togglable dark mode for Rocket.Chat

License

Notifications You must be signed in to change notification settings

ShuiHuo/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

NOTE:

  • For Rocket.Chat versions 3.2.2 - 3.3.3, use the code from the 3.2.2 branch or from the accompanying release.
  • For 3.4.0 or newer, use the code from the master branch.

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 > Layout
  3. Copy the contents of dark-mode.css into Custom CSS
  4. Copy the contents of dark-mode-toggle.js into Custom Scripts > Custom Script for Logged In Users
  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.

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.

About

An easy user-togglable dark mode for Rocket.Chat

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • CSS 74.0%
  • JavaScript 26.0%