Update 'custom.css'

custom.css

@@ -5,6 +5,7 @@
 :root {
 	--primary-font-color: #444;
 	--info-font-color: #a0a0a0;
+	--color-darker: #272c33;
 }
 
 /* Reset global font color so that it's changable more easily */
@@ -38,7 +39,11 @@ input, select, textarea {
 	}
 }
 
-
+@keyframes highlight {
+	from {
+		background-color: hsl(216, 92%, 54%);
+	}
+}
 
 /******************************************
  ************Transition Effect*************
@@ -135,6 +140,10 @@ body.dark-mode {
 	/* Mention link */
 	--mention-link-background: var(--color-dark-medium);
 	--mention-link-text-color: var(--color-light-blue);
+	--mention-link-me-background: var(--alerts-background);
+	--mention-link-me-text-color: var(--color-white);
+	--mention-link-group-background: var(--alerts-background);
+	--mention-link-group-text-color: var(--color-white);
 
 	/* Message box */
 	--message-box-user-typing-color: var(--color-gray-lightest);
@@ -156,10 +165,9 @@ body.dark-mode {
 	/* alert */
 	--alerts-background: #1d73f5;
 	--alerts-color: var(--color-white);
-  
+
-    /* highlight text */
+	--message-box-editing-color: var(--rc-color-alert-message-warning-background);
-    --selection-background: orangered;
+	--rc-color-alert: var(--color-dark-red);
-  
 }
 
 
@@ -180,7 +188,7 @@ body.dark-mode select {
 }
 
 body.dark-mode select option {
-	color: var(--primary-font-color);
+	color: var(--color-white);
 }
 
 body.dark-mode .sidebar-item > a {
@@ -260,13 +268,17 @@ body.dark-mode .message.new-day::before {
 
 body.dark-mode .message.active,
 body.dark-mode .message:hover {
-    background-color: var(--color-dark-medium);
+    background-color: var(--color-darker);
 }
 
 body.dark-mode .message.editing {
 	background-color: var(--color-dark-blue);
 }
 
+body.dark-mode .message.first-unread .body:after {
+	background-color: var(--header-background-color);
+}
+
 body.dark-mode .rc-message-box__container {
 	background-color: var(--message-box-background);
 }
@@ -277,7 +289,14 @@ body.dark-mode .rc-old .rc-message-box .reply-preview {
 
 body.dark-mode .message-actions,
 body.dark-mode .rc-member-list__counter {
-	color: var(--color-gray);
+	color: var(--color-gray-light);
+	background-color: var(--color-darkest);
+	border-color: var(--color-dark);
+}
+
+body.dark-mode .message-actions__button:hover,
+body.dark-mode .message-actions__menu:hover {
+	background-color: var(--color-dark);
 }
 
 body.dark-mode .background-transparent-darker-before::before {
@@ -377,7 +396,8 @@ body.dark-mode .message-popup-title {
 
 /**************Code Highlights*****************/
 
-body.dark-mode .code-colors {
+body.dark-mode .code-colors,
+body.dark-mode .rc-old code.inline {
 	background: var(--color-dark-100);
 	color: var(--color-gray-light);
 }
@@ -558,6 +578,10 @@ body.dark-mode .rcx-box {
 	background-color: var(--color-dark) !important;
 }
 
+body.dark-mode .rcx-modal__backdrop {
+	background-color: transparent !important;
+}
+
 body.dark-mode .rcx-table__cell--align-start {
     color: var(--info-font-color) !important;
 	background-color: var(--color-dark-medium) !important;
@@ -616,6 +640,10 @@ body.dark-mode .setting-action {
 
 /**************Login Page******************/
 
+body.dark-mode main#rocket-chat {
+	background-color: var(--color-dark);
+}
+
 body.dark-mode section.full-page.color-tertiary-font-color {
 	background-color: var(--color-dark);
 }
@@ -623,6 +651,7 @@ body.dark-mode section.full-page.color-tertiary-font-color {
 body.dark-mode .rc-button.rc-button--nude.forgot-password,
 body.dark-mode .rc-button.rc-button--nude.back-to-login,
 body.dark-mode .rc-button.rc-button--nude.register,
+body.dark-mode .rc-button.rc-button--nude i.icon-cancel,
 body.dark-mode .register-link-replacement {
 	color: var(--color-white);
 }
@@ -655,4 +684,4 @@ body.dark-mode .rcx-subtitle,
 body.dark-mode .rcx-box--text-color-default, 
 body.dark-mode .rcx-box--text-color-info {
     color: var(--color-dark);
-}
+}