Git Product home page Git Product logo

rocketchat-dark-mode's Introduction

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 > 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.

Problems?

If you encounter any problems with this dark mode plugin, please open an issue - or better yet, fix it and open a pull request. If you're a JavaScript or CSS wizard (I'm not), feel free to add features and styles or improve code quality. It's always appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.