diff --git a/custom.css b/custom.css
index f8d6899..8aae9e6 100644
--- a/custom.css
+++ b/custom.css
@@ -1,98 +1,654 @@
+/******************************************
+ *************General Settings*************
+ ******************************************/
+
 :root {
-  --header-background-color: #141414 !important;
-  --message-box-editing-color: #141414 !important;
-  --popover-background: #121212 !important;
-  --chip-background : #141414 !important;
+	--primary-font-color: #444;
+	--info-font-color: #a0a0a0;
 }
 
-.reply-preview {
-  background-color: #222222 !important;
+/* Reset global font color so that it's changable more easily */
+.color-primary-font-color, textarea {
+	color: var(--primary-font-color);
 }
 
-.rc-table-title{
-  color: #dddddd !important;
+.color-info-font-color {
+	color: var(--info-font-color);
 }
 
-.rc-popover__item {
-  color: #FFFFFF !important;
+input, select, textarea {
+	color: var(--input-text-color);
 }
 
-.sidebar {
-  color: #FFFFFF !important;
+.error-color {
+	color: var(--rc-color-error);
 }
 
-.sidebar-item.sidebar-item--unread {
-  color: #ff2222 !important;
+.js-button[aria-label="Toggle Dark Mode"] {
+	transition: filter 150ms;
 }
 
-.sidebar-item.sidebar-item--unread::after {
-  content: "💬";
+.sidebar__toolbar-button-icon--darkmode {
+	height: .9em;
 }
 
-.sidebar__toolbar-button {
-  color: #FFFFFF !important;
+@media (min-width: 1372px) {
+	.sidebar__toolbar-button {
+		margin: 0 3px;
+	}
 }
 
-.sidebar-item {
-  color: #FFFFFF !important;
+
+
+/******************************************
+ ************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;
 }
 
-.sidebar-light .sidebar-item {
-  color: #FFFFFF !important;
+
+
+/******************************************
+ *************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);
 }
 
-.contextual-bar {
-  background-color: #171717 !important;
+
+
+/******************************************
+ *********Manual Dark Theme Overrides******
+ ******************************************/
+
+
+/***************Main Chat*****************/
+
+body.dark-mode a {
+	color: var(--color-light-blue);
 }
 
-.contextual-bar__header {
-  background-color: #101010 !important;
+body.dark-mode select {
+	background-color: var(--color-dark);
 }
 
-.rc-member-list__counter {
-  color: #FFFFFF !important;
+body.dark-mode select option {
+	color: var(--primary-font-color);
 }
 
-.message.editing {
-  background-color: #222222 !important;
+body.dark-mode .sidebar-item > a {
+	color: inherit;
 }
 
-.rc-user-info-container {
-  background-color: #101010 !important;
+body.dark-mode select option {
+	color: var(--color-dark);
 }
 
-.rc-user-info-details {
-  background-color: #101010 !important;
+body.dark-mode .rc-switch__text {
+	color: var(--color-white);
 }
 
-.message .highlight-text {
-  background-color: var(--mention-link-me-background) !important;
+body.dark-mode .rc-switch-double {
+	color: var(--color-white);
 }
 
-.message .reactions > li {
-  background-color: transparent !important;
+body.dark-mode .rc-switch__button {
+	background-color: var(--color-dark);
 }
 
-.background-transparent-darker-before::before {
-  background-color: #DEDEDE !important;
+body.dark-mode .error-border {
+	border-color: var(--color-dark-red);
 }
 
-.background-component-color {
-  background-color: #000000 !important;
+body.dark-mode .background-component-color {
+	background-color: var(--color-dark-blue);
 }
 
-.message-actions {
-  color: #FFFFFF !important;
+body.dark-mode .upload-progress-progress {
+	background-color: var(--color-blue);
 }
 
-.rc-message-box__typing-user {
-  color: #FFFFFF !important;
+body.dark-mode .container-bars .color-primary-action-color {
+	color: var(--color-white);
 }
 
-.rooms-list__type {
-  color: firebrick !important;
+body.dark-mode .burger i {
+	background-color: var(--color-white);
 }
 
-.message:hover {
-    background: #5b5b5b;
+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 {
+    background-color: var(--color-darkest);
+}
+
+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.active,
+body.dark-mode .message:hover {
+    background-color: var(--color-dark-medium);
+}
+
+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);
+}
+
+/***** 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);
+}
+
+/*****/
+
+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 {
+	border-bottom: 2px solid var(--color-dark-medium);
+}
+
+body.dark-mode .room-leader:hover {
+	background-color: var(--color-darkest);
+}
+
+body.dark-mode .chat-now {
+	color: var(--color-white);
+}
+
+body.dark-mode .message-popup-title {
+	background-color: var(--color-dark);
+}
+
+/**************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);
+}
+
+body.dark-mode .hljs-addition {
+  background-color: #1e3a21;
+}
+body.dark-mode .hljs-deletion {
+  background-color: #472d2e;
+}
+
+/***** 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{
+	color: var(--color-white);
+}
+
+body.dark-mode .sidebar-flex__search .rc-input__element {
+	color: var(--color-dark);
+}
+
+body.dark-mode .rcx-input-box__wrapper {
+	background-color: var(--color-dark);
+}
+
+body.dark-mode .rcx-box * .rcx-input-box {
+	background-color: var(--color-dark);
+}
+
+body.dark-mode .rcx-table__cell {
+	color: var(--color-gray);
+	background-color: var(--color-dark);
+}
+
+body.dark-mode  .rcx-table__cell--align-end {
+	color: var(--color-gray);
+	background-color: var(--color-gray);
+}
+
+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-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);
+}
+
+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-box * .rcx-input-box,*/
+body.dark-mode .rcx-box * .rcx-select {
+	/*color: var(--color-dark-medium);*/
+	background-color: var(--color-white);
+}
+
+body.dark-mode .mail-messages__instructions {
+	background-color: var(--color-dark);
+}
+
+body.dark-mode .rcx-tag--secondary {
+	background-color: var(--color-dark-medium);
+}
+
+body.dark-mode .rcx-table__cell--align-end {
+    color: var(--info-font-color) !important;
+	background-color: var(--color-dark-medium) !important;
+}
+
+body.dark-mode .rcx-box {
+    color: var(--info-font-color) !important;
+	background-color: var(--color-dark) !important;
+}
+
+body.dark-mode .rcx-table__cell--align-start {
+    color: var(--info-font-color) !important;
+	background-color: var(--color-dark-medium) !important;
+}
+
+body.dark-mode .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 {
+	background-color: var(--color-dark);
+}
+
+body.dark-mode .table-fake-th {
+	color: var(--info-font-color);
+}
+
+body.dark-mode .rc-input__element {
+	background-color: var(--color-dark-medium);
+	color: var(--info-font-color) !important;
+}
+
+body.dark-mode .rcx-check-box.is-focused,
+body.dark-mode .rcx-check-box__input:checked+.rcx-check-box__fake,
+body.dark-mode .rcx-check-box.is-focused,
+body.dark-mode .rcx-check-box__input:indeterminate+.rcx-check-box__fake,
+body.dark-mode .rcx-check-box__input:checked:focus+.rcx-check-box__fake,
+body.dark-mode .rcx-check-box__input:indeterminate:focus+.rcx-check-box__fake,
+body.dark-mode .rcx-radio-button.is-focused
+body.dark-mode .rcx-radio-button__input:checked+.rcx-radio-button__fake,
+body.dark-mode .rcx-radio-button__input:checked:focus+.rcx-radio-button__fake,
+body.dark-mode .rcx-toggle-switch.is-focused
+body.dark-mode .rcx-toggle-switch__input:checked+.rcx-toggle-switch__fake,
+body.dark-mode .rcx-toggle-switch__input:checked:focus+.rcx-toggle-switch__fake {
+	background-color: #1d74f5 !important;
+}
+
+body.dark-mode .CodeMirror {
+	background-color: var(--color-gray-light);
+}
+
+body.dark-mode .CodeMirror-gutter {
+	background-color: var(--color-dark);
+}
+
+body.dark-mode .setting-action {
+	border: var(--button-border-width) solid var(--info-font-color);
+	color: var(--info-font-color);
+}
+
+
+/**************Login Page******************/
+
+body.dark-mode section.full-page.color-tertiary-font-color {
+	background-color: var(--color-dark);
+}
+
+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 .register-link-replacement {
+	color: var(--color-white);
+}
+
+body.dark-mode #login-card {
+	background-color: var(--color-darkest);
+}
+
+
+/**************Scrollbars******************/
+body.dark-mode *::-webkit-scrollbar {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+body.dark-mode *::-webkit-scrollbar-thumb {
+	background-color: rgba(255, 255, 255, 0.15);
+}
+
+body.dark-mode *::-webkit-scrollbar-corner {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+/***** Poll App *****/
+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-subtitle, 
+body.dark-mode .rcx-box--text-color-default, 
+body.dark-mode .rcx-box--text-color-info {
+    color: var(--color-dark);
 }
\ No newline at end of file