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);
}

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.