Rocket.Chat Dark Mode

dark-mode-toggle.js

// Toggleable dark mode for those of us that care about that kind of thing.
const toggleButton = '<button class="sidebar__toolbar-button rc-tooltip rc-tooltip--down js-button" aria-label="Toggle Dark Mode">D</button>';

function addDarkModeToggle() {
  const sidebarToolbar = $('.sidebar__toolbar');
  
  // wait for the sidebar toolbar to be visible
  // this will also be false if the toolbar doesn't exist yet
  if(!sidebarToolbar.is(':visible')) {
    setTimeout(addDarkModeToggle, 250);
    return;
  }
  
  var darkModeButton = $('.js-button[aria-label="Toggle Dark Mode"]');
  
  // do nothing if button is already on the screen
  if(darkModeButton.is(':visible')) {
  	return;	
  }
  
  darkModeButton = $(toggleButton).prependTo(sidebarToolbar);
  
  darkModeButton.on('click', function() {
    // This will store the current dark mode state in local storage for re-application on page load
    localStorage.setItem('dark-mode', document.body.classList.toggle('dark-mode'));
  });
}

$(addDarkModeToggle);

// Apply dark mode immediately if it's been set previously
if(localStorage.getItem('dark-mode') === 'true') {
  document.body.classList.add('dark-mode');
}

dark-mode.css

:root {
  --primary-font-color: #444;
  --info-font-color: #a0a0a0;
}

/* Reset global font color so that it's changable more easily */
.color-primary-font-color, textarea {
  color: var(--primary-font-color);
}

.color-info-font-color {
  color: var(--info-font-color);
}

select {
  color: var(--input-text-color);
}

.error-color {
  color: var(--rc-color-error);
}

.js-button[aria-label="Toggle Dark Mode"] {
  transition: filter 150ms;  
}

/**
 * Transitions for a smooth change into dark mode
 */
textarea,
select,
.color-primary-font-color,
.color-info-font-color,
.messages-box .message .body, /* override for opacity transition */
.rc-header__name,
.rc-header__wrap,
.message .reactions>li,
.message .title .is-bot,
.message .title .role-tag,
.message.new-day::before,
.code-colors,
.hljs-selector-id,
.hljs-selector-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-title,
.hljs-doctag,
.hljs-string,
.hljs-type,
.hljs-literal, 
.hljs-number, 
.hljs-tag .hljs-attr, 
.hljs-template-variable,
.hljs-variable,
.rc-message-box__container,
.messages-container .footer,
.content-background-color,
.message.new-day::after,
.message .reactions>li,
.border-component-color,
.contextual-bar__header,
.sidebar__footer {
  transition: opacity 300ms linear, color 150ms, background-color 150ms, border-color 150ms;
}

/**
 * Dark Mode Settings
 */
body.dark-mode {
  --header-background-color: var(--color-darkest);
  --header-title-username-color-darker: var(--color-gray-lightest);
  --primary-font-color: var(--color-gray-lightest);
  --info-font-color: var(--color-gray-light);
  --message-box-typing-user-color: var(--color-gray-light);

  --rc-color-primary: var(--color-gray-lightest);
  --rc-color-primary-lightest: var(--color-dark-medium);
  --rc-color-alert-message-warning-background: hsl(352, 83%, 20%);
  
  --input-text-color: var(--color-gray-lightest);
  --input-icon-color: var(--color-gray-lightest);
  
  --mention-link-text-color: var(--color-light-blue);
  --mention-link-background: var(--color-dark-medium);
}

body.dark-mode a {
  color: var(--color-light-blue);
}

body.dark-mode a:visited {
  color: hsl(310, 90%, 70%);
}

body.dark-mode .sidebar-item > a {
  color: inherit;
}

body.dark-mode .emoji-picker {
  background-color: var(--rc-color-primary-dark);
}

body.dark-mode .emoji-picker .filter-item.active {
  border-color: hsl(203, 73%, 52%);
}

body.dark-mode .rc-old .rc-message-box .reply-preview {
  background-color: var(--color-dark);
}

body.dark-mode .message-actions,
body.dark-mode .rc-member-list__counter {
  color: var(--color-gray);
}

body.dark-mode .rc-member-list__user.active,
body.dark-mode .rc-member-list__user:hover {
  background-color: var(--color-darkest);
}

body.dark-mode select option {
  color: var(--color-dark);
}

body.dark-mode .error-border {
  border-color: var(--color-dark-red);
}

body.dark-mode .messages-container .footer,
body.dark-mode .content-background-color {
  background-color: var(--header-background-color);
}

body.dark-mode .message.new-day::after,
body.dark-mode .message .reactions>li,
body.dark-mode .border-component-color {
  border-color: var(--rc-color-primary-lightest);
}

body.dark-mode .js-button[aria-label="Toggle Dark Mode"] {
  filter: brightness(130%);
}

body.dark-mode .message .reactions>li,
body.dark-mode .message .title .is-bot,
body.dark-mode .message .title .role-tag,
body.dark-mode .message.new-day::before {
  background-color: hsl(219, 15%, 33%);
}

body.dark-mode .rc-message-box__container {
  background-color: hsla(0, 0, 100%, 0.1);
}

body.dark-mode .rc-button {
  border-color: var(--color-gray-medium);
  color: var(--color-gray-medium);
}

/* Ensure that colors still come through on buttons in dark mode */
body.dark-mode .rc-button--cancel.rc-button--outline {
  color: #f5455c;
  color: var(--button-cancel-color);
  border-color: #f5455c;
  border-color: var(--button-cancel-color);
}

body.dark-mode .contextual-bar {
  background-color: var(--color-dark);
}

body.dark-mode .contextual-bar__header {
  background-color: var(--color-darkest);
}

/**
 * Code Highlighting
 *
 * Colors based on HipChat highlighting
 */

body.dark-mode .code-colors {
  background: var(--color-dark-100);
  color: var(--color-gray-light);
}

body.dark-mode .hljs-selector-id,
body.dark-mode .hljs-keyword {
  color: var(--color-light-blue);
}

body.dark-mode .hljs-title {
  color: var(--color-gray-light);
}

body.dark-mode .hljs-literal, 
body.dark-mode .hljs-number, 
body.dark-mode .hljs-tag .hljs-attr, 
body.dark-mode .hljs-template-variable, 
body.dark-mode .hljs-variable {
  color: var(--color-dark-green);
}

body.dark-mode .hljs-selector-tag {
  color: var(--color-green);
}

body.dark-mode .hljs-doctag, 
body.dark-mode .hljs-string {
  color: var(--color-red);
}

body.dark-mode .hljs-attribute,
body.dark-mode .hljs-type,
body.dark-mode .hljs-number {
  color: var(--color-orange);
}

/**
 * Admin specific settings
 */
.page-list a:not(.rc-button), .page-settings a:not(.rc-button) {
  color: var(--primary-font-color);
}

body.dark-mode .sidebar-light .sidebar-flex__header {
  color: var(--color-dark);
}

body.dark-mode .admin-table-row {
  background-color: hsl(219, 16%, 25%);
}

body.dark-mode .admin-table-row:nth-child(even) {
  background-color: hsl(219, 15%, 33%);
}

body.dark-mode .permissions-manager .permission-grid .id-styler {
  color: var(--info-font-color);
}

NOTE: This was built on Rocket.Chat version 1.0.3 and may not work on later versions.

Dark mode for Rocket.chat using the built in "Custom CSS" and "Custom Scripts" settings under "Layout". Admin panel support is "good enough" for me, YMMV.

The toggle button is placed in the top toolbar in the sidebar:

And here's what the message area looks like (I didn't touch the sidebar colors):

Thanks for this gist, our users love it and it's getting used pretty heavily here.

I've noticed the following issues with the current version of the dark mode script (hopefully a fairly comprehensive list):

• Message Reaction and message actions buttons (smiley face & vertical ellipses) to the right of each message are not visible in dark mode.
  ** When clicking the Reaction button the reaction search text field is light grey on white.
  ** The message action menu does not have dark mode applied.
• The Create new channel dialog does not have dark mode applied, and as a result the channel name entered in this dialog cannot be seen
• Same for new Discussion dialog - Discussion name & "your message" fields are unreadable.
• Font colour for "Add new users" to channel is light-grey on grey (hard to read). User name dropdown does not have dark mode applied
• Mail message dialog - user drop down does not have dark mode applied. User name, email fields are grey on grey.
• Channel Notification preference dialog text is grey on grey (for the toggle options).
• Room info dialog text is grey on grey (for the toggle options)
• Admin menu sidebar/list does not have dark mode applied
• Admin "Retention Policy" page, the "Timer Precision" field is white text on a light grey background
• Admin "Smarsh" page, the "Smarsh Interval" field is white text on a light grey background

We've upgraded RocketChat since I started writing this list, the issues are the same in both versions. Currently running 1.2.1.