Updated to latest version of CSS.

custom.css

@@ -30,7 +30,8 @@ input, select, textarea {
 }
 
 .rcx-icon--name-darkmode {
-	height: .9em;
+	height: 1em;
+	font-size: 1rem !important;
 }
 
 @media (min-width: 1372px) {
@@ -90,8 +91,6 @@ select,
 	transition: opacity 300ms linear, color 150ms, background-color 150ms, border-color 150ms;
 }
 
-
-
 /******************************************
  *************Dark Mode Settings***********
  ******************************************/
@@ -170,19 +169,57 @@ body.dark-mode {
 	--rc-color-alert: var(--color-dark-red);
 }
 
-
-
 /******************************************
  *********Manual Dark Theme Overrides******
  ******************************************/
 
-
 /***************Main Chat*****************/
 
+/* Blockquote */
+body.dark-mode .rcx-css-1d5cod7 {
+	background-color: var(--color-darkest) !important;
+}
+
+body.dark-mode blockquote.rcx-attachment__details .rcx-box--full {
+	color: var(--secondary-font-color);
+}
+
+body.dark-mode .rcx-css-11c35pn:hover .rcx-attachment__details,
+body.dark-mode .rcx-css-11c35pn:focus .rcx-attachment__details {
+	background-color: var(--color-dark) !important;
+}
+
+/* Attachements content */
+body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full {
+    color: var(--primary-font-color);
+}
+
+/* Pinned messages content */
+body.dark-mode .rcx-css-ntpg4f {
+    color: var(--rc-color-primary) !important;
+}
+
+/* Message "You joined a new private conversation with" */
+body.dark-mode .rcx-css-dlop43 {
+	color: var(--rc-color-primary) !important;
+}
+
 body.dark-mode .main-content a {
 	color: var(--color-light-blue);
 }
 
+body.dark-mode .main-content .messages-box .wrapper {
+	background-color: var(--color-darkest);
+}
+
+body.dark-mode .mention-link--group {
+	color: var(--mention-link-group-text-color) !important;
+}
+
+body.dark-mode .mention-link--me {
+	color: var(--mention-link-me-text-color) !important;
+}
+
 body.dark-mode select {
 	background-color: var(--color-dark);
 }
@@ -195,6 +232,10 @@ body.dark-mode .sidebar-item > a {
 	color: inherit;
 }
 
+body.dark-mode .highlight-text {
+    background-color: var(--color-blue);
+}
+
 body.dark-mode .rc-switch__text {
 	color: var(--color-white);
 }
@@ -311,17 +352,42 @@ body.dark-mode .background-transparent-darker-before::before {
 	background-color: var(--color-dark-medium);
 }
 
+/* User card */
+body.dark-mode .rcx-user-card {
+	background-color: var(--color-dark) !important;
+}
+
+body.dark-mode .rcx-user-card .rcx-button:not(.rcx-css-ue04py) {
+    background-color: var(--color-dark-medium);
+    border: none;
+}
+
+body.dark-mode .rcx-user-card .rcx-button:hover {
+    background-color: var(--color-dark-light);
+    border: none;
+}
+
+/* Modals */
+
 /*body.dark-mode .background-info-font-color {
 	background-color: var(--color-dark-medium);
 }*/
+body.dark-mode .rcx-modal__inner,
+body.dark-mode .rcx-modal__footer {
+	background: var(--color-dark);
+}
 
-body.dark-mode .rc-modal,
+body.dark-mode .rc-modal__footer,
-body.dark-mode .rc-modal__footer {
+body.dark-mode .rc-modal {
 	background: var(--color-darkest);
 }
 
 body.dark-mode .rc-modal__content,
-body.dark-mode .rc-modal__header {
+body.dark-mode .rc-modal__header,
+body.dark-mode .rcx-modal__content,
+body.dark-mode .rcx-modal__inner,
+body.dark-mode .rcx-modal__header,
+body.dark-mode .rcx-modal__title {
 	color: var(--color-white);
 }
 
@@ -357,6 +423,90 @@ body.dark-mode .contextual-bar__content {
 	background-color: var(--color-dark);
 }
 
+body.dark-mode .rc-member-list__counter {
+	background-color: var(--color-dark);
+}
+
+/**** Select / Dropdowns ****/
+
+body.dark-mode .rcx-select {
+    background-color: var(--rc-color-primary-darkest) !important;
+}
+
+body.dark-mode .rcx-options > .rcx-tile {
+    background-color: var(--rc-color-primary-darkest) !important;
+}
+
+body.dark-mode .rcx-options .rcx-option,
+body.dark-mode .rcx-options .rcx-option--focus /* Temporary fix while focus is not refreshed */ {
+	background-color: var(--rc-color-primary-darkest) !important;
+	color: var(--color-white) !important;
+}
+
+body.dark-mode .rc-popover__content .rcx-option:hover,
+/* body.dark-mode .rcx-options .rcx-option--focus, */ /* Temporary fix while focus is not refreshed */
+body.dark-mode .rcx-options .rcx-option--selected {
+    background-color: var(--color-dark-light) !important;
+}
+
+body.dark-mode .rcx-options .rcx-option:hover,
+body.dark-mode .rcx-options .rcx-option--selected:hover {
+	background-color: var(--color-dark) !important;
+}
+
+/***** Buttons *****/
+
+/* Regular button style */
+body.dark-mode .main-content .rcx-button:not(.rcx-button--ghost) { /* Default */
+	background-color: var(--color-dark) !important;
+}
+body.dark-mode .main-content .rcx-button:is(.rcx-button--ghost, .rcx-button):hover { /* Hovered or selected */
+	background-color: var(--color-darkest) !important;
+}
+
+/* Square (icon) button style */
+body.dark-mode .main-content .rcx-button--square:not(.rcx-button--ghost), /* Default */
+body.dark-mode .main-content .rcx-button--square:is(.rcx-button--ghost, .rcx-button):hover {  /* Hovered or selected */
+	background-color: var(--color-dark) !important;
+	border-color: transparent !important;
+}
+
+body.dark-mode .rcx-button {
+    color: var(--info-font-color);
+}
+
+body.dark-mode .rcx-button--ghost:not(.rcx-button--square):hover {
+	color: var(--color-dark) !important;
+}
+
+body.dark-mode .rcx-button--primary {
+	color: var(--info-font-color);
+	background-color: #095ad2
+}
+
+body.dark-mode .rcx-button--primary:disabled {
+	color: var(--color-gray);
+}
+
+body.dark-mode .rcx-button--danger {
+	color: var(--rcx-button-colors-secondary-danger-color,var(--rcx-color-danger-500,#f5455c));
+}
+
+/***** Right sidebar *****/
+
+/* TODO : switch toggle */
+
+body.dark-mode .rcx-vertical-bar {
+	background-color: var(--rc-color-primary-background) !important;
+}
+
+body.dark-mode .rcx-css-136xdpx:hover, /* Thread list item */
+body.dark-mode .rcx-css-136xdpx:focus, 
+body.dark-mode .rcx-css-1es44sn:hover, /* Files list item */
+body.dark-mode .rcx-css-1es44sn:focus {
+    background-color: var(--rc-color-primary-dark);
+}
+
 /* Targets unread message indicator in threads panel. */
 body.dark-mode button.rcx-contextual-message__follow + div.rcx-box--full {
     background-color: #1d74f5 !important;
@@ -435,7 +585,8 @@ body.dark-mode .hljs-name {
 	color: var(--color-light-blue);
 }
 
-body.dark-mode .hljs-selector-tag {
+body.dark-mode .hljs-selector-tag,
+body.dark-mode .hljs-subst {
 	color: var(--color-green);
 }
 
@@ -469,12 +620,66 @@ body.dark-mode .js-logout {
 	border-color: var(--primary-font-color);
 }
 
-/**************Admin Panel******************/
+/************** Admin panel & Account panel ******************/
 
 .page-list a:not(.rc-button), .page-settings a:not(.rc-button) {
 	color: var(--primary-font-color);
 }
 
+/*body.dark-mode .simplebar-content > .rcx-box => will also modify sidebar background */
+body.dark-mode .simplebar-content > .rcx-css-fr02gd { /* main content */
+    background-color: var(--color-dark);
+}
+
+body.dark-mode .rcx-css-txktj6 { /* Account settings page background */
+    background-color: var(--color-dark) !important;
+}
+
+body.dark-mode .rcx-css-1wm5na { /* Account settings page header title */
+	color: var(--primary-font-color) !important;
+}
+
+body.dark-mode .rc-scrollbars-container { /* Panels sidebar */
+    background-color: var(--sidebar-background);
+}
+
+body.dark-mode .rcx-css-15hfnte {  /* Panels sidebar header */
+    background-color: var(--color-dark);
+}
+
+body.dark-mode .rcx-css-10ij0kz .rcx-box { /* Panels sidebar header text and button (with cross icon) */
+    color: var(--primary-font-color) !important;
+}
+
+body.dark-mode .rcx-css-15hfnte .rcx-css-4pvxx3:hover { /* Panels sidebar button (with cross icon) hovered */
+    color: var(--rc-color-primary-dark) !important;
+}
+
+body.dark-mode .rcx-css-1l00c5f,
+body.dark-mode .rcx-css-1ky5rco { /* Panels sidebar item */
+    color: var(--rcx-sidebar-item-color,var(--rcx-color-foreground-hint,#9ea2a8)) !important;
+}
+
+body.dark-mode .rcx-css-1l00c5f.active { /* Panels sidebar item selected */
+    background-color: rgba(108, 114, 122, 0.3);
+}
+
+body.dark-mode .rcx-css-1l00c5f:hover, .rcx-css-1l00c5f:focus, .rcx-css-1l00c5f.active:focus, .rcx-css-1l00c5f.active:hover { /* Panels sidebar item hovered */
+    background-color: var(--color-darkest);
+}
+
+body.dark-mode .rcx-css-kyq2rf { /* Admin panel info & stats (Deployment, License, Usage) */
+	background-color: var(--color-dark) !important;
+}
+
+body.dark-mode .rcx-css-61di5s { /* Admin panel info & stats (Deployment, License, Usage) */
+	color: var(--color-gray) !important;
+}
+
+body.dark-mode .rcx-select__item {
+	color: var(--primary-font-color) !important;
+}
+
 body.dark-mode .sidebar-flex__header {
 	background-color: var(--color-dark);
 }
@@ -499,18 +704,29 @@ body.dark-mode .rcx-input-box__wrapper {
 
 body.dark-mode .rcx-box * .rcx-input-box {
 	background-color: var(--color-dark);
+	color: var(--rc-color-primary);
 }
 
 body.dark-mode .rcx-table__cell {
-	color: var(--color-gray);
+	color: var(--color-gray) !important;
 	background-color: var(--color-dark);
 }
 
-body.dark-mode  .rcx-table__cell--align-end {
+body.dark-mode .rcx-table__cell--header {
+	color: var(--color-gray-lightest) !important;
+}
+
+body.dark-mode .rcx-table__cell--align-end {
 	color: var(--color-gray);
 	background-color: var(--color-gray);
 }
 
+body.dark-mode .rcx-css-18up6l1,
+body.dark-mode .rcx-css-zvbm6,
+body.dark-mode .rcx-css-n6qrb5 { /* Table cells content text*/
+	color: var(--primary-font-color) !important;
+}
+
 body.dark-mode .rc-input__element:disabled{
 	background-color: var(--color-gray);
 }
@@ -542,14 +758,6 @@ body.dark-mode .rcx-box--text-color-info {
 	color: var(--color-gray-lightest);
 }
 
-body.dark-mode .rcx-table__cell {
-	color: var(--color-gray-lightest);
-}
-
-body.dark-mode .rcx-button--primary:disabled {
-	color: var(--color-gray);
-}
-
 body.dark-mode .permissions-manager .permission-grid .role-name {
 	background: var(--color-dark);
 }
@@ -580,31 +788,30 @@ body.dark-mode .rcx-tag--secondary {
 }
 
 body.dark-mode .rcx-table__cell--align-end {
-    color: var(--info-font-color) !important;
+  color: var(--info-font-color) !important;
 	background-color: var(--color-dark-medium) !important;
 }
 
-body.dark-mode .main-content .rcx-box {
+/* Apply info (white) font *everywhere* */
+body.dark-mode .rcx-css-ps0pgs, /* Channel name */
+body.dark-mode .rcx-room-header  .rcx-box:not(.rcx-button-group):not(.rcx-button):not(.rcx-css-1fgkscl):not(.rcx-css-4pvxx3), /* omit buttons/icons (.rcx-css-1fgkscl is .rcx-icon parent) */
+body.dark-mode .rcx-vertical-bar .rcx-box:not(.rcx-button-group):not(.rcx-button):not(.rcx-css-1fgkscl):not(.rcx-css-4pvxx3) {
+  color: var(--info-font-color) !important;
+	/*background-color: var(--color-darkest) !important;*/
+}
+
+/* body.dark-mode .main-content .rcx-box {
     color: var(--info-font-color) !important;
 	background-color: var(--color-dark) !important;
-}
+} */
 
-body.dark-mode .rcx-modal__backdrop {
+/* body.dark-mode .rcx-modal__backdrop {
 	background-color: transparent !important;
-}
+} */
 
 body.dark-mode .rcx-table__cell--align-start {
-    color: var(--info-font-color) !important;
+  color: var(--info-font-color) !important;
-	background-color: var(--color-dark-medium) !important;
+  background-color: var(--color-dark-medium) !important;
-}
-
-body.dark-mode .main-content .rcx-button {
-	background-color: var(--color-dark-medium)
-}
-
-body.dark-mode .rcx-button--primary {
-	color: var(--info-font-color);
-	background-color: #095ad2
 }
 
 body.dark-mode  .rcx-field__description code {
@@ -690,9 +897,83 @@ body.dark-mode .rc-modal-wrapper > dialog > div {
 	background-color: var(--header-background-color);
 }
 
-body.dark-mode .rcx-box--text-style-h1, 
+body.dark-mode .rcx-box--text-style-h1,
-body.dark-mode .rcx-subtitle, 
+body.dark-mode .rcx-subtitle,
-body.dark-mode .rcx-box--text-color-default, 
+body.dark-mode .rcx-box--text-color-default,
 body.dark-mode .rcx-box--text-color-info {
     color: var(--color-dark);
 }
+
+/* Style the browser scroll bars to avoid visually clashing with the rest of Rocket.Chat in dark mode. */
+
+/*
+body.dark-mode * {
+	scrollbar-color: #777 transparent;
+}
+*/
+
+body.dark-mode *::-webkit-scrollbar {
+	width: .75rem;
+}
+
+body.dark-mode *::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+body.dark-mode *::-webkit-scrollbar-thumb {
+	background-color: #777;
+}
+
+/* Firefox does the dimming on hover automatically. We emulate it for Webkit-based browsers. */
+body.dark-mode *::-webkit-scrollbar-thumb:hover {
+	background-color: #666;
+}
+
+body.dark-mode *::-webkit-scrollbar-thumb:active {
+	background-color: #444;
+}
+
+/***** Changes for 3.9.1 *****/
+
+/* aside.sidebar--main .rcx-sidebar-topbar .rcx-button--small-square {
+    width: 1.35rem;
+}
+body.dark-mode .main-content .rcx-box {
+    color: var(--info-font-color) !important;
+	background-color: var(--color-darkest) !important;
+}
+body.dark-mode div[class*="user-card"] {
+    color: var(--info-font-color) !important;
+    background-color: var(--color-dark) !important;
+}
+body.dark-mode .rcx-box {
+    color: var(--info-font-color) !important;
+    background-color: var(--color-dark-medium);
+}
+body.dark-mode .rcx-status-bullet--online {
+  background: #2de0a5 !important;
+}
+body.dark-mode .rcx-box--full {
+    background-color: var(--color-dark);
+}
+body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__title,
+body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__subtitle,
+body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__time {
+	color: var(--sidebar-item-text-color);
+}
+body.dark-mode .rcx-sidebar-topbar button.rcx-button-group__item .rcx-icon,
+body.dark-mode .rcx-box.rcx-box--full.rcx-icon--name-hashtag,
+body.dark-mode .rcx-box.rcx-box--full.rcx-sidebar-title {
+	color: var(--sidebar-item-text-color) !important;
+}
+body.dark-mode .rcx-sidebar-item--highlighted {
+	color: #fff !important;
+}
+body.dark-mode .rcx-sidebar-item__container span.rcx-box.rcx-box--full.rcx-badge {
+	background-color: var(--rc-color-alert);
+} */
+
+/* This CSS block is used to counter RocketChat's bug which crop the end of custom CSS. */
+.dummy-entry {
+    color: whitesmoke;
+}