Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/juzser/rocket.chat-dark-mode

Dark mode for Rocket.Chat
https://github.com/juzser/rocket.chat-dark-mode
dark-mode dark-theme rocketchat rocketchat-dark rocketchat-ui
Last synced: 5 days ago
JSON representation
Dark mode for Rocket.Chat
Host: GitHub
URL: https://github.com/juzser/rocket.chat-dark-mode
Owner: juzser
Created: 2023-01-10T03:17:12.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-01-10T03:56:18.000Z (about 2 years ago)
Last Synced: 2025-01-18T20:18:07.824Z (12 days ago)
Topics: dark-mode, dark-theme, rocketchat, rocketchat-dark, rocketchat-ui
Homepage:
Size: 9.77 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        # Rocket.Chat dark mode

Dark mode toggle for Rocket.Chat. This is compatible with the latest version of Rocket.Chat.

Please star this repo if you like it.

### Customizable

You can customize the colors by change the `:root` & `:root .dark-mode` css variables in custom css field.

I also customized the sidebar a bit, you can change the sidebar width by changing the `--sidebar-width` variable.

Have fun!



## Installation

Go to Admin > Settings > Layout.

Then add the following code to the fields:

1. Custom CSS:

```css

:root {

  --primary-font-color: #222;

  --info-font-color: #737373;

  --var-yahoo-width: 40px;

  --mention-link-text-color: #164faf;

  --mention-link-background: #ddecff;

  --mention-link-group-text-color: #3c3c3c;

  --mention-link-group-background: #f9e661;

  --rcx-tooltip-text-color: #fff;

  --sidebar-width: 230px;

  --tags-color: #b45817;

  --tags-border-color: #d3d3d3;

}

/**

 * ==== DARK MODE variables ====

 */

:root .dark-mode {

  --dark-background: #242629;

  --dark-background-secondary: #333;

  --dark-background-hover: #16171a;

  --dark-color: #fff;

  --dark-color-neutral: #8a8a8a;

  --rcx-color-neutral-100: #303236;

  --rcx-color-neutral-400: #434343;

  --rcx-color-neutral-500: #4e5052;

  --rcx-color-neutral-600: #898c8f;

  --rcx-color-neutral-700: #a9adbe;

  --dark-color-secondary: #c4c8ce;

  --dark-color-icon-neutral: #b2b2b2;

  --dark-border-color-dim: #41474c;

  --dark-color-danger: #ee7663;

  --tags-color: #ff984f;

  --tags-background-color: #313538;

  --tags-border-color: #46474a;

  --message-header-name-color: #c2c7cf;

  --icon-background-color: #2f3b46;

  --sidebar-background-color: #292b2f;

  --mention-link-text-color: var(--color-light-blue);

  --mention-link-background: var(--color-dark-medium);

  /* Overwritten */

  --secondary-background-color: var(--dark-background-secondary);

  --rcx-color-surface-tint: var(--dark-background);

  --primary-font-color: var(--dark-color);

  --info-font-color: var(--dark-color-secondary);

  --rcx-color-font-hint: #828a9a;

  --rcx-color-primary-500: #5698f8;

  --rcx-button-primary-background-color: #156ff5;

  --rcx-button-primary-border-color: #156ff5;

  --input-icon-color: var(--dark-color-neutral);

  --rcx-input-colors-focus-shadow-color: #3c3c3c;

  --rcx-color-surface-light: var(--dark-background);

  --rcx-color-font-default: var(--dark-color);

  --rcx-color-font-danger: var(--dark-color-danger);

  --rcx-color-stroke-extra-light: var(--dark-border-color-dim);

  --rcx-button-icon-color: var(--dark-color-icon-neutral);

  --rcx-option-color-variant-danger: var(--dark-color-danger);

  --rcx-color-danger-700: var(--dark-color-danger);

  --rcx-color-font-secondary-info: #84888d;

  --rcx-color-button-background-primary-hover: #4b8ef1;

  --rcx-color-stroke-highlight: #2d71d5;

  --rcx-color-primary-600: #5393f1;

  --rc-color-button-primary: #4f91f3;

  --rcx-button-secondary-background-color: #eceff2;

  --rcx-button-secondary-border-color: #eceff2;

  --rcx-button-secondary-hover-background-color: #d3e9ff;

  --rcx-button-secondary-hover-border-color: #d3e9ff;

  --rcx-button-danger-background-color: #f0203b;

  --rcx-button-danger-border-color: #f0203b;

  --rcx-color-status-background-warning-2: #42413e;

  --rcx-message-background-color-editing: #373a40;

  /* Message Box */

  --message-box-color: var(--dark-color);

  --message-box-markdown-hover-color: var(--dark-color);

  --rcx-message-background-color: var(--dark-background);

  --rcx-message-background-color-focus: #202123;

  --rcx-color-surface-hover: #282b33;

  --rcx-button-icon-hover-background-color: var(--dark-background-hover);

  --rcx-button-icon-hover-border-color: var(--dark-background-hover);

  --rcx-message-divider-color: var(--dark-color-neutral);

  --rcx-message-divider-background-color: var(--dark-border-color-dim);

  --message-box-container-border-color: var(--dark-border-color-dim);

  --rcx-button-icon-background-color: var(--rcx-color-surface-light);

  --message-box-user-activity-user-color: var(--rcx-color-neutral-700);

  --rcx-message-reaction-background-color: var(--rcx-color-surface-light);

  --rcx-message-reaction-color: var(--color-light-blue);

  --rcx-message-reaction-border-color: var(--rcx-color-neutral-700);

  --rcx-color-font-annotation: var(--rcx-color-neutral-600);

  /* Threads */

  --content-background-color: var(--dark-background);

  --component-color: var(--dark-border-color-dim);

  --color-darkest: var(--rcx-button-icon-color);

  --popover-background: var(--dark-background-hover);

  --popover-item-color: var(--dark-color);

  /* User preferences */

  --color-gray-lightest: var(--dark-background);

  --flex-nav-background: var(--dark-background);

  --sidebar-background-light-active: var(--dark-background-hover);

  --sidebar-background-light-hover: var(--dark-background-hover);

  --rcx-tag-colors-default-background-color: var(--dark-color);

  --rcx-tag-colors-secondary-background-color: #e4e7ea;

  /* Common inputs */

  --input-border-color: var(--dark-border-color-dim);

  --info-font-color: var(--dark-color-neutral);

  --input-text-color: var(--dark-color);

  --primary-background-color: var(--color-light-blue);

}

/**

 * ==== GLOBAL changes ====

 */

/* Sidebar */

.rcx-sidebar-topbar__wrapper .rcx-icon {

  font-size: 1.1rem !important;

}

.rcx-sidebar-topbar__wrapper .rcx-button--small-square {

  width: 20px;

  height: 20px;

}

.rcx-sidebar-topbar__wrapper .rcx-button--small-square:last-child {

  display: none;

}

.rcx-sidebar-topbar__wrapper .rcx-button-group {

  margin-right: -0.25rem;

}

.rcx-sidebar-topbar__wrapper .rcx-button-group .rcx-button-group__item {

  margin-left: .2rem;

  margin-right: .2rem;

}

.rcx-sidebar-footer {

  display: none;

}

/* Add gap to bottom of sidebar */

.rcx-box.rcx-box--full.rcx-css-1cb6i7s {

  padding-bottom: 30px;

}

@media (min-width: 1372px) {

  .sidebar {

    width: 15%;

    max-width: 15%;

  }

}

/* Code tags */

.rcx-box--with-inline-elements code,

.rcx-field__description code,

.rcx-field__error code,

.rcx-field__hint code,

.rcx-field__link code {

  color: var(--tags-color) !important;

}

.rc-old .code-colors {

  color: var(--tags-color);

}

/* Others */

.rc-old .message-popup-title {

  font-weight: 700;

}

.rcx-message-system__block .rcx-message-system__body,

.rcx-message-system__block .rcx-message-system__name,

.rcx-message-system__block .rcx-message-system__time {

  font-size: 0.8rem;

}

.rcx-message-system__block .rcx-message-system__name {

  opacity: .7;

}

/**

 * ==== DARK MODE styling ====

 */

.dark-mode .rcx-sidebar {

  background-color: var(--sidebar-background-color);

}

.dark-mode .rcx-sidebar-topbar__wrapper .rcx-button--icon {

  background-color: var(--sidebar-background-color);

  border-color: var(--sidebar-background-color);

}

.dark-mode .rc-message-box,

.dark-mode .message.active,

.dark-mode .message:hover {

  background-color: var(--dark-background);

}

.dark-mode .emoji-picker {

  background-color: rgba(26, 28, 29, 0.98);

}

.dark-mode .message .reactions > li,

.dark-mode .rcx-message-reactions__reaction {

  background-color: var(--icon-background-color);

  border-color: var(--icon-background-color);

}

.dark-mode .message-actions {

  background-color: var(--rcx-color-surface-light);

  border-color: var(--rcx-color-stroke-extra-light);

}

.dark-mode .rc-popover__item:hover {

  background-color: var(--dark-background);

}

.dark-mode .message.new-day:before {

  color: var(--rcx-message-divider-color);

}

.dark-mode .rc-old .code-colors {

  border-color: var(--tags-border-color);

  background-color: var(--tags-background-color);

}

.dark-mode .rcx-message-header__name {

  color: var(--message-header-name-color);

}

.dark-mode .rcx-css-1fbr01f {

  border-color: #3e91fc !important;

}

/* Quote & code */

.dark-mode .hljs-keyword,

.dark-mode .hljs-selector-tag,

.dark-mode .hljs-subst {

  color: var(--dark-color);

}

.dark-mode .hljs-section,

.dark-mode .hljs-selector-id,

.dark-mode .hljs-title {

  color: #e33c3c;

}

.dark-mode .hljs-literal,

.dark-mode .hljs-number,

.dark-mode .hljs-tag .hljs-attr,

.dark-mode .hljs-template-variable,

.dark-mode .hljs-variable {

  color: #20cbcb;

}

.dark-mode .hljs-attribute,

.dark-mode .hljs-name,

.dark-mode .hljs-tag {

  color: #9f9fee;

}

.dark-mode .hljs-doctag,

.dark-mode .hljs-string {

  color: #f595ad;

}

```

2. Custom Script:

```javascript

// Dark mode toggle

const darkModeDefault = false;

const darkModeSymbol = `

  

`; // moon icon

const lightModeSymbol = `

  

  

  

  

  

  

  

  

  

`; // sun icon

const toggleButton = 'D';

function isDarkModeSet() {

  return localStorage.getItem('dark-mode') === 'true';

}

function getDarkModeIcon() {

  return `

    

    ${isDarkModeSet() ? lightModeSymbol : darkModeSymbol}

  `;

}

function toggleDarkMode() {

  document.body.classList.toggle('dark-mode');

  const setting = (!isDarkModeSet()).toString();

  localStorage.setItem('dark-mode', setting);

}

function addDarkModeToggle() {

  const sidebarToolbar = $('.rcx-sidebar-topbar__wrapper .rcx-button-group--medium');

  // 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.html(getDarkModeIcon());

  darkModeButton.on('click', function() {

    toggleDarkMode();

    darkModeButton.html(getDarkModeIcon());

  });

}

if (localStorage.getItem('dark-mode') !== 'false'

    && window.location.href.indexOf('admin') === -1) {

  document.body.classList.add('dark-mode');

}

$(addDarkModeToggle);

```