dark-mode.css

/******************************************
 *************General Settings*************
 ******************************************/

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

input, select, textarea {
	color: var(--input-text-color);
}

.error-color {
	color: var(--rc-color-error);
}

.js-button[aria-label="Toggle Dark Mode"] {
	transition: filter 150ms;
}

.sidebar__toolbar-button-icon--darkmode {
	height: .9em;
}

@media (min-width: 1372px) {
	.sidebar__toolbar-button {
		margin: 0 3px;
	}
}



/******************************************
 ************Transition Effect*************
 ******************************************/
input,
textarea,
select,
.color-primary-font-color,
.color-info-font-color,
.background-info-font-color,
.background-transparent-darker-before::before,
.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-name,
.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,
.contextual-bar__content,
.sidebar__footer {
	transition: opacity 300ms linear, color 150ms, background-color 150ms, border-color 150ms;
}



/******************************************
 *************Dark Mode Settings***********
 ******************************************/
body.dark-mode {
	
	/****************************** Custom Variables ******************************/
	--primary-font-color: var(--color-gray-lightest);
	--info-font-color: var(--color-gray-light);
	--message-box-background: hsla(0, 0, 100%, 0.1);

	--button-outline-color: var(--color-gray-medium);
	--button-close-color: var(--color-gray-medium);
 

	/********************** Overridden Rocket.Chat Variables **********************/
	 
	/* General Colors */
	--rc-color-alert-message-warning-background: hsl(352, 83%, 20%);
	--rc-color-primary: var(--color-gray-lightest);
	--rc-color-primary-lightest: var(--color-dark-medium);

	/* Forms - Button */
	--button-disabled-background: var(--color-dark-70);
	--button-disabled-text-color: var(--color-dark-80);

	/* Forms - Input */
	--input-text-color: var(--color-gray-lightest);
	--input-icon-color: var(--color-gray-lightest);

	/* Forms - popup list */
	--popup-list-background: var(--color-dark);
	--popup-list-background-hover: var(--color-darkest);
	--popup-list-selected-background: var(--color-dark);
	--popup-list-name-color: var(--color-white);

	/* Forms - tags */
	--tags-text-color: var(--color-white);
	--tags-background: var(--color-blue);

	/* Sidebar */
	--sidebar-background: var(--color-dark);

	/* Chip */
	--chip-background: var(--color-blue);

	/* Mention link */
	--mention-link-background: var(--color-dark-medium);
	--mention-link-text-color: var(--color-light-blue);

	/* Message box */
	--message-box-user-typing-color: var(--color-gray-lightest);
	--message-box-user-typing-user-color: var(--color-gray-lightest);

	/* Header */
	--header-title-username-color-darker: var(--color-gray-lightest);
	--header-background-color: var(--color-darkest);

	/* Popover */
	--popover-background: var(--color-dark);
	--popover-title-color: var(--color-white);
	--popover-item-color: var(--color-white);

	/* Tooltip */
	--tooltip-background: var(--color-darkest);
	--tooltip-text-color: var(--color-white);

	/* alert */
	--alerts-background: #1d73f5;
	--alerts-color: var(--color-white);
}



/******************************************
 *********Manual Dark Theme Overrides******
 ******************************************/


/***************Main Chat*****************/

body.dark-mode a {
	color: var(--color-light-blue);
}

body.dark-mode .sidebar-item > a {
	color: inherit;
}

body.dark-mode select option {
	color: var(--color-dark);
}

body.dark-mode .rc-switch__text {
	color: var(--color-white);
}

body.dark-mode .rc-switch-double {
	color: var(--color-white);
}

body.dark-mode .error-border {
	border-color: var(--color-dark-red);
}

body.dark-mode .background-component-color {
	background-color: var(--color-dark-blue);
}

body.dark-mode .upload-progress-progress {
	background-color: var(--color-blue);
}

body.dark-mode .container-bars .color-primary-action-color {
	color: var(--color-white);
}

body.dark-mode .burger i {
	background-color: var(--color-white);
}

body.dark-mode .rc-member-list__user.active,
body.dark-mode .rc-member-list__user:hover {
	background-color: var(--color-darkest);
}

body.dark-mode .rc-user-info-details {
	background-color: var(--color-dark-medium);
}

body.dark-mode p.rc-user-info-details__info {
	color: var(--color-white);
}

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 .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: var(--rc-color-primary-dark);
}

body.dark-mode .message.editing {
	background-color: var(--color-dark-blue);
}

body.dark-mode .rc-message-box__container {
	background-color: var(--message-box-background);
}

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 .background-transparent-darker-before::before {
    background-color: var(--color-dark-medium);
}

body.dark-mode .background-info-font-color {
    background-color: var(--color-dark-medium);
}

body.dark-mode .rc-modal,
body.dark-mode .rc-modal__footer {
	background: var(--color-darkest);
}

body.dark-mode .rc-modal__content,
body.dark-mode .rc-modal__header {
	color: var(--color-white);
}

body.dark-mode .rc-button--outline {
	border-color: var(--button-outline-color);
	color: var(--button-outline-color);
}

body.dark-mode .rc-button--outline.js-close,
body.dark-mode .rc-button--nude.js-close {
	border-color: var(--button-close-color);
	color: var(--button-close-color);
}

body.dark-mode .rc-button--cancel,
body.dark-mode .rc-button--danger {
	background-color: var(--button-cancel-color);
	border-color: var(--button-cancel-color);
	color: var(--button-primary-text-color);
}

body.dark-mode .contextual-bar {
	background-color: var(--color-dark);
  	border-left: 2px solid var(--color-dark-medium);
}

body.dark-mode .contextual-bar__header {
	background-color: var(--color-dark);
  	border-bottom: 1px solid var(--color-dark-medium);
}

body.dark-mode .contextual-bar__content {
	background-color: var(--color-dark);
}

body.dark-mode .rc-popover__content {
	background-color: var(--popover-background);
	box-shadow: 0px 0px 2px var(--color-dark-20);
}

body.dark-mode .emoji-picker .filter-item.active {
	border-color: var(--color-light-blue);
}

body.dark-mode .rc-header--room {
	box-shadow: 0px 0px 3px var(--color-dark-medium);
}

body.dark-mode .room-leader:hover {
	background-color: var(--color-darkest);
}

body.dark-mode .chat-now {
	color: var(--color-white);
}

/**************Chat file list*****************/

body.dark-mode .attachments__item:hover, .attachments__item:active {
	background-color: var(--color-darkest);
}
  
body.dark-mode .attachments__content:hover, .attachments__content:active {
	color: var(--primary-font-color);
}
  
body.dark-mode .attachments__name {
	color: var(--color-blue);
}
  
body.dark-mode .attachments__name:hover, .attachments__name:active {
	color: var(--color-light-blue);
}

/**************Code Highlights*****************/

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-attr,
body.dark-mode .hljs-template-variable,
body.dark-mode .hljs-variable {
	color: var(--color-dark-green);
}

body.dark-mode .hljs-tag,
body.dark-mode .hljs-name {
	color: var(--color-light-blue);
}

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

/**************My Account******************/

body.dark-mode .rc-form-legend,
body.dark-mode .rc-form-label {
  	color: var(--primary-font-color);
}

body.dark-mode .js-logout {
  	color: var(--primary-font-color);
  	border-color: var(--primary-font-color);
}

/**************Admin Panel******************/

.page-list a:not(.rc-button), .page-settings a:not(.rc-button) {
	color: var(--primary-font-color);
}

body.dark-mode .sidebar-flex__header {
	background-color: var(--color-dark);
}

body.dark-mode .sidebar-light {
	background-color: var(--color-dark);
}

body.dark-mode .rcx-accordion-item__title,
body.dark-mode .rcx-label__text,
body.dark-mode .rcx-field__label,
body.dark-mode .rcx-paragraph {
	color: var(--color-white);
}

body.dark-mode .sidebar-flex__search .rc-input__element {
	color: var(--color-dark);
}

body.dark-mode .rc-input__element:disabled{
	background-color: var(--color-gray);
}

body.dark-mode .admin-table-row {
	background-color: hsl(219, 16%, 25%);
}

body.dark-mode .sidebar-light .sidebar-item {
	color: inherit;
}

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

body.dark-mode .rcx-accordion-item__bar:hover {
	background-color: var(--color-dark-30);
}

body.dark-mode .rcx-box--text-style-h1, 
body.dark-mode .rcx-subtitle, 
body.dark-mode .rcx-box--text-color-default, 
body.dark-mode .rcx-box--text-color-info {
	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);
}

body.dark-mode .rc-apps-marketplace .rc-table-content tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover, 
body.dark-mode .rc-apps-section .rc-table-content tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover {
	background-color: var(--color-dark);
}

body.dark-mode .rc-apps-marketplace .rc-table-content .rc-table-info .rc-apps-categories .rc-apps-category, 
body.dark-mode .rc-apps-section .rc-table-content .rc-table-info .rc-apps-categories .rc-apps-category {
	color: var(--primary-font-color);
    background-color: var(--color-dark-medium);
}

body.dark-mode .rcx-select {
	color: var(--primary-font-color);
	background-color: var(--color-dark-medium);
}

/**************Login Page******************/

section.full-page.color-tertiary-font-color {
	background-color: var(--color-dark);
}

.rc-button.rc-button--nude.forgot-password,
.rc-button.rc-button--nude.back-to-login,
.rc-button.rc-button--nude.register {
    color: var(--color-white);
}