Newest Dark by aestheticw3

/* ==UserStyle==
@name           Habitica Dark
@namespace      USO Archive
@author         Jeff Sieu
@description    `A dark theme for Habitica.Recommended: Install this theme from <a href="http://github.com/jeffsieu/habitica-dark">here</a> for automatic updates`
@version        20200709.8.53
@license        CC-BY-NC-SA-4.0
@preprocessor   uso
==/UserStyle== */
/* ==UserStyle==
@name           Habitica Dark
@namespace      github.com/jeffsieu/habitica-dark
@version        1.0.0
@description    A dark theme for Habitica.com, following Material Design 2.0 colors
@author         Jeff Sieu <jeffsy00@mgmail.com>
@license        MIT
==/UserStyle== */
@-moz-document domain("habitica.com") {
 body {
  --background-color-1: #242424;
  --background-color-2: #363636;
  --background-color-3: #474747;
  --background-color-4: #595959;
  --background-color-5: #6b6b6b;
  --background-color-purple: #584766;
  --green: #a2efd3;
  --red: #ff898b;
  --red-dropdown: #FBC1C2;
  --purple: #c980ffd4;
  --purple-dropdown: #f4e4ff;
  --text-hint-color: #808080;
  --text-primary-color: #fff;
  --text-secondary-color: #b3b3b3;
  --text-link-color: #90c6ff;
  --text-gem-color: #a2efd3;
  --text-gold-color: #ffdb9f;
  --text-hourglass-color: #bae6fd;
  --text-str-color: #fcb2b4;
  --text-int-color: #94cdea;
  --text-con-color: #ffb84e;
  --text-per-color: #cebeec;
  --text-footer-primary-color: #e5e4e7;
  --text-footer-secondary-color: #b2aeb7;
  --task-worst-color: #de3f3f;
  --task-worse-color: #ff6165;
  --task-bad-color: #ff944c;
  --task-neutral-color: #ffbe5d;
  --task-good-color: #1ca372;
  --task-better-color: #3bcad7;
  --task-best-color: #50b5e9;
  color: var(--text-primary-color);
 }

	
nav {
  background: #202020 !important;
	border-bottom: 2px solid rgb(40, 40, 40) !important;
 }
	
 #app-header {
  background: #202020 !important;
	
 }

 .btn-primary {
  background: var(--background-color-3) !important;
 }

	.tasks-list {
		padding: 0 !important;
	}
	
	.left-control {
		border-radius: 0 !important;
	}
	
	code {
		color: var(--purple) !important;
	}
	
	.topbar-dropdown {
		background:  var(--background-color-3) !important;
	}
	
	.nav-link:hover {
		background:  var(--background-color-3) !important;
		border: none !important;
	}
	
	.progress {
		background: #6b6b6b !important;
	}
	
	footer {
		display: none !important;
	}
	
	.tasks-columns {
		padding-bottom: 50px !important;
	}
	
	

 

 /* SURFACE COLORS */
 /* Background 1 - Background surface color */
 body,
 .secondary-menu,
 .quick-add:focus,
 .modal .customize-section,
 #private-message,
 .well,
 .well .box {
  background-color: var(--background-color-1) !important;
 }

 /* Background 2 - Surfaces above backgrounds */
 .tasks-list,
 .standard-sidebar,
 .sidebar,
 :not(navbar-dark) > nav > .nav-link:hover,
 footer,
 .group .items,
 .card,
 .subscribe-card,
 .box,
 .challenge,
 .tier-list li,
 .task-modal-content,
 .modal-content,
 .stats-column,
 #task-modal .advanced-settings,
 .task-disabled-habit-control-bg,
 .checklist-component .input-group .input-group-append,
 #avatar-modal #backgrounds .background-set,
 .background-set,
 .disable-background,
 .drawer-content {
  background-color: var(--background-color-2) !important;
 }

 /* Background 3 - Buttons, items to be separated from background */
 .header-bar,
 .task-content,
 .item,
 :not(.currency-tray):not(.form-inline) > .item-with-icon,
 .task,
 .filter-panel,
 .tags-popup,
 .form-control,
 .diamond-btn:not(#create-task-btn),
 .btn.btn-flat,
 .box.white,
 .category-label,
 .challenge .well,
 .badge,
 .class-badge,
 .sidebar .challenge,
 .social-circle,
 .slider-button,
 .input-group .input-group-append,
 .input-group .input-group-prepend,
 .category-select,
 .quick-add,
 .modal-header,
 #task-modal .option-item-box:not([class*="modal-bg"]),
 #avatar-modal #backgrounds .purchase-background,
 .outer-option-background.locked,
 .purchase-set,
 .outer-option-background.active .option,
 .outer-option-background:not(.locked):not(.active) .option:hover,
 #subscription-form .subscription-bubble,
 .modal-body .popover-content-attr,
 #buy-modal .modal-footer,
 .drawer-title,
 .side-panel,
 .left-panel {
  background-color: var(--background-color-3) !important;
 }

 /* Background 4 - Dialogs, dropdowns, hovered buttons */
 .collapse-checklist,
 .dropdown-menu,
 .vdp-datepicker__calendar,
 .social-circle:hover,
 .btn.btn-flat:hover,
 .introjs-tooltip,
 .category-box,
 .questRewards .reward-item,
 .left-panel .quest-col .quest-wrapper {
  background-color: var(--background-color-4) !important;
 }

 /* Background 5 - Hovered surfaces on dropdowns */
 .vdp-datepicker__calendar header .next:not(.disabled):hover,
 .vdp-datepicker__calendar header .prev:not(.disabled):hover,
 .vdp-datepicker__calendar header .up:not(.disabled):hover {
  background-color: var(--background-color-5) !important;
 }

 /* Selected item purple background */
 .conversation.active {
  background-color: var(--background-color-purple) !important;
 }

 /* Purple surfaces */
 .badge-purple,
 span.badge.badge-round.badge-item.badge-clock,
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
 .vdp-datepicker .vdp-datepicker__calendar .cell.selected,
 .vdp-datepicker .vdp-datepicker__calendar .cell.selected.highlighted,
 .vdp-datepicker .vdp-datepicker__calendar .cell.selected:hover,
 .suggestedDot {
  background: var(--purple) !important;
 }

 .item:hover,
 .task:hover .left-control,
 .task:hover .task-content,
 .task:hover .right-control,
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
 .vdp-datepicker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
 .outer-option-background.active .option,
 .left-panel .selected .quest-wrapper {
  border-color: var(--purple) !important;
 }

 .filter:hover,
 #avatar-modal .customize-menu .menu-container.active,
 #avatar-modal .customize-menu .menu-container:hover {
  color: var(--purple) !important;
 }

 .task-clickable-area .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon,
 .task-clickable-area .habitica-menu-dropdown.open .habitica-menu-dropdown-toggle .svg-icon,
 .official .svg-icon path:first-child {
  fill: var(--purple);
 }

 .filter.active,
 .nav-link.active,
 .sub-menu .sub-menu-item.active,
 .sub-menu .sub-menu-item:hover,
 .nav-item.active[data-v-bc94e650],
 .nav-item[data-v-bc94e650]:hover {
  color: var(--purple) !important;
  border-color: var(--purple) !important;
 }

 :not(.topbar-item) > .nav-link.active,
 .topbar-item.active {
  box-shadow: inset 0 -4px 0 var(--purple) !important;
 }

 /* ICON COLORS */
 /* Gray logos */
 .diamond-btn:not(#create-task-btn) .svg-icon path,
 .btn.btn-secondary .svg-icon path {
  fill: var(--text-secondary-color);
 }

 .collapse-checklist .svg-icon path {
  fill: var(--text-secondary-color) !important;
 }

 .close-icon svg path,
 .slider-button .svg-icon path,
 .drawer-toggle-icon.svg-icon path {
  stroke: var(--text-secondary-color) !important;
 }

 .dropdown-menu .dropdown-item .push-to-top path,
 .dropdown-menu .dropdown-item .push-to-bottom path {
  stroke: var(--text-primary-color) !important;
 }

 .close {
  color: var(--text-secondary-color) !important;
 }

 .vdp-datepicker__calendar header .next:after {
  border-left-color: var(--text-secondary-color) !important;
 }

 .vdp-datepicker__calendar header .prev:after {
  border-right-color: var(--text-secondary-color) !important;
 }

 #avatar-modal .customize-menu .menu-container.active .indicator,
 .sub-menu-item {
  border-bottom-color: var(--background-color-1) !important;
 }

 #members-modal .modal-body .dropdown-menu li:first-child .dropdown-item svg path {
  fill: var(--purple) !important;
 }

 #members-modal .modal-body .dropdown-menu li .dropdown-item {
  fill: var(--text-secondary-color) !important;
 }

 #members-modal .modal-body .dropdown-menu li .dropdown-item svg path {
  fill: var(--text-secondary-color) !important;
 }

 /* Purple Habitica logo */
 .svg-logo path:first-child {
  fill: var(--purple) !important;
 }

 /* Invert black emoji colors */
 .habitica-emoji[alt="heavy_plus_sign"],
 .habitica-emoji[alt="heavy_minus_sign"] {
  filter: invert(1);
 }

 /* Change white icon on purple background to black */
 .badge-clock svg path:first-child,
 .official .svg-icon path:nth-child(2) {
  fill: var(--background-color-1);
 }

 .badge-clock svg path:nth-child(2) {
  stroke: var(--background-color-1);
 }

 /* Lighten red buttons/icons */
 .dropdown-menu .dropdown-item .delete-task-item path {
  fill: var(--red-dropdown) !important;
 }

 .dropdown-menu .dropdown-item .delete-task-item {
  color: var(--red-dropdown) !important;
 }

 #task-modal .delete-task-btn .svg-icon svg path {
  fill: var(--red) !important;
 }

 #task-modal .delete-task-btn .delete-text,
 .due-overdue {
  color: var(--red) !important;
 }

 #task-modal .delete-task-btn:active,
 #task-modal .delete-task-btn:focus,
 #task-modal .delete-task-btn:hover {
  text-decoration-color: var(--red) !important;
 }

 /* Dropdown menu, subscription form purple highlight */
 .dropdown-item.active,
 .dropdown-item:active,
 .dropdown-item:hover,
 #subscription-form .selected .subscription-text {
  color: var(--purple-dropdown) !important;
  background-color: rgba(163, 135, 255, .32) !important;
 }

 /* FORM CONTROLS */
 input,
 input.form-control,
 textarea:not(.quick-add),
 textarea.form-control,
 select {
  background-color: var(--background-color-1) !important;
  border-color: var(--background-color-5) !important;
  color: var(--text-primary-color) !important;
 }

 /* Radio button */
 .custom-control .custom-control-label:before {
  border-color: var(--text-secondary-color) !important;
 }

 /* Normal buttons */
 .btn-secondary,
 .dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
 .show > .btn-secondary.dropdown-toggle:not(.btn-success) {
  background: var(--background-color-3) !important;
  color: var(--text-primary-color) !important;
 }

 .btn-secondary:active,
...