Skip to content

Instantly share code, notes, and snippets.

@chall8908
Last active September 17, 2021 07:37
Show Gist options
  • Save chall8908/c03dd6cc443cdb9cbb7034d441a1350d to your computer and use it in GitHub Desktop.
Save chall8908/c03dd6cc443cdb9cbb7034d441a1350d to your computer and use it in GitHub Desktop.
Rocket.Chat Dark Mode
// 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');
}
: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);
}
@chall8908
Copy link
Author

chall8908 commented Jun 6, 2019

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:

Screenshot from 2019-06-06 16-25-20

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

redacted-rocket chat-dark-mode

@adam-kosseck
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment