This is a theme for Habitica that changes the UI to something more comfortable to the eye, especially at night. I have tried to stick to the official colours of Habitica where possible. Tested on Chrome, should work on Firefox and Edge. This is a personal project and will be updated when I feel like it.
As of
@-moz-document url-prefix("https://habitica.com/") {
/* ==UserStyle==
@name Helix's Habitica Dark
@version 2.2.6
@description This is a theme for Habitica that changes the UI to something more comfortable to the eye, especially at night. I have tried to stick to the official colours of Habitica where possible. Tested on Chrome, should work on Firefox and Edge. This is a personal project and will be updated when I feel like it.
@author tripplehelix
@license CC-BY-4.0
@namespace https://greasyfork.org/users/697440
==/UserStyle== */
:focus {
outline: unset;
}
*,
.task-better-modal-headings,
.task-better-modal-text,
.dropdown-item,
.dropdown-item:hover,
.hover-foreground[data-v-144f9604],
.filter[data-v-a51310ce],
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover,
.task-neutral-modal-headings,
.task-neutral-modal-text,
.item[data-v-2ae7992c],
.item,
.btn-show-more,
#buy-quest-modal .right-sidebar,
.modal-body .popover-content-attr,
.full-width[data-v-7a22a3be],
.conversations[data-v-7a22a3be],
#avatar-modal #backgrounds .background-set,
.filter[data-v-a51310ce]:hover,
.task-title[data-v-02609699],
.task-best-modal-headings,
.task-best-modal-text,
textarea,
h1[data-v-4052e15e],
a.leader[data-v-e895429a],
.price-label.gold[data-v-2ae7992c],
.task-good-modal-headings,
.task-good-modal-text,
.task-worst-modal-text,
.task-purple-modal-text,
.dropdown.open .dropdown-menu[data-v-6b6f97f6],
.filter.active[data-v-a51310ce],
.at-text,
.task-reward-control-bg .small-text {
color: #ffffff !important;
}
.card .gold .member-count[data-v-fa64579e],
.card .gold[data-v-fa64579e],
.card .silver .member-count[data-v-fa64579e],
.card .silver[data-v-fa64579e],
.card .member-count[data-v-fa64579e] {
color: #000000 !important;
}
body,
.tasks-list[data-v-a51310ce],
#buy-modal .modal-footer,
#task-modal input,
#task-modal textarea,
.tier-list li[data-v-9b3c098e],
.messages-column .empty-messages[data-v-7a22a3be],
.messages-column .message-scroll[data-v-7a22a3be],
#level-up footer,
.btn-secondary,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
.show > .btn-secondary.dropdown-toggle:not(.btn-success),
.modal-body,
#task-modal .advanced-settings,
.group .items,
#buy-quest-modal .modal-footer,
.vdp-datepicker__calendar,
.vdp-datepicker .vdp-datepicker__calendar .datetime-buttons button,
.vdp-datepicker__calendar header .prev:not(.disabled):hover,
.vdp-datepicker__calendar header .next:not(.disabled):hover,
.vdp-datepicker__calendar header .up:not(.disabled):hover,
.toggle-checkbox[data-v-17699435],
.toggle-checkbox[data-v-17699435]:not(.disabled):not(:disabled):not(.checked):hover,
.toggle-checkbox[data-v-17699435]:not(.disabled):not(:disabled):not(.checked):active,
.toggle-checkbox[data-v-17699435]:not(.disabled):not(:disabled):not(.checked):focus,
.conversation.active[data-v-00e3fa3c],
.sidebar[data-v-4052e15e],
.form-control,
.card-body[data-v-98d735e4],
.header-bar[data-v-e6e716f4] {
background-color: #36205D !important;
}
.badge-purple,
.badge-default,
.slider-button,
.sidebar[data-v-9b3c098e],
.category-label,
.item[data-v-2ae7992c],
.item,
.btn-show-more,
#buy-quest-modal .right-sidebar,
.modal-body .popover-content-attr,
.full-width[data-v-7a22a3be],
.conversations[data-v-7a22a3be],
#avatar-modal #backgrounds .background-set,
.card-body[data-v-929c3d32],
.card[data-v-60bfde4d],
#achievements .achievement-list-item .badge[data-v-367a6e32],
.task-content[data-v-02609699],
.card-body[data-v-4ce44a78] {
background-color: #573496 !important;
}
.input-group:not(.checklist-group) .input-group-append,
.input-group:not(.checklist-group) .input-group-prepend,
.input-group input,
.dropdown-item,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled).active,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):active,
.select-multi .dropdown-header,
.btn-secondary:active,
#task-modal input:active:not(:disabled),
#task-modal input:focus:not(:disabled),
#task-modal input:hover:not(:disabled),
#task-modal textarea:active:not(:disabled),
#task-modal textarea:focus:not(:disabled),
#task-modal textarea:hover:not(:disabled),
.modal-header,
input,
input.form-control,
textarea,
textarea.form-control,
.btn-primary.disabled,
.btn-primary:disabled,
.badge-equip.is-equipped:hover,
.bordered-item .item,
.badge-pin[data-v-47c03167],
.chat-row textarea,
.icon[data-v-283c054f],
.questRewards .reward-item[data-v-245218bd],
.form-control:focus,
.subscribe-card[data-v-6bbdad4d],
.bg-gray-700[data-v-6bbdad4d],
.subscribe-card[data-v-ad88e024],
.sidebar[data-v-aef69f00],
.tag[data-v-aef69f00],
.full-width[data-v-e6e716f4],
.disable-background[data-v-e6e716f4],
.dropdown-item.dropdown-inactive.active,
.dropdown-item.dropdown-inactive:active,
.dropdown-item.dropdown-inactive:hover,
.badge-equip,
.card[data-v-fa64579e],
.conversation[data-v-00e3fa3c]:hover,
.btn-secondary:not(:disabled):not(.disabled):hover,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):hover,
.show > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):hover,
.challenge .well[data-v-35e659de],
.side-panel[data-v-53ab197a],
.sidebar[data-v-6b0d5628],
.sidebar[data-v-64248106],
.spell[data-v-2e210baf],
.category-box,
.category-select {
background-color: #4e4a57 !important;
}
.btn-secondary:focus,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):active,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):focus,
.show > .btn-secondary.dropdown-toggle:not(.btn-success):active,
.show > .btn-secondary.dropdown-toggle:not(.btn-success):focus,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover,
.item.item-empty,
input,
input.form-control,
textarea,
textarea.form-control,
.create-dropdown[data-v-6e58c381] form.b-dropdown-form,
.form-control[data-v-757a1a7c],
#achievements .achievement-list-item .badge[data-v-414cf09a],
.conversation.active[data-v-00e3fa3c],
.messages-column[data-v-7a22a3be],
.outer-option-background.active .option[data-v-5d0229fc],
#avatar-modal #backgrounds .purchase-background,
#task-modal input,
#task-modal textarea,
.tier-list li[data-v-9b3c098e],
.messages-column .empty-messages[data-v-7a22a3be],
.messages-column .message-scroll[data-v-7a22a3be],
.bg-gray-700[data-v-ad88e024],
.messages-column .empty-messages[data-v-e6e716f4],
.messages-column .message-scroll[data-v-e6e716f4],
.messages-column[data-v-e6e716f4],
.multi-item[data-v-5fb3885b],
icon-item,
.task-disabled-habit-control-bg,
.stats-column[data-v-20edc046],
.side-panel[data-v-4cf93156],
#buy-gems .modal-body {
background-color: #6c757d !important;
}
.input-group-spaced,
.sidebar[data-v-5cdfd8b6],
.tag[data-v-5cdfd8b6],
.box[data-v-5cdfd8b6],
.header-bar[data-v-7a22a3be],
.box[data-v-aef69f00],
.item-with-icon[data-v-6b0d5628],
#buy-gems .modal-header,
.challenge[data-v-35e659de] {
background-color: #6133b4 !important;
}
.autocomplete-selection {
background-color: #343a40 !important;
}
.dropdown.open .dropdown-menu[data-v-6b6f97f6] {
background-color: #271b3d !important;
}
.vdp-datepicker .vdp-datepicker__calendar .datetime-buttons,
.vdp-datepicker .vdp-datepicker__calendar header,
.nav-link[data-v-535ed182]:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.conversation.active[data-v-00e3fa3c],
.reward-control[data-v-02609699] {
background-color: #6f42c1 !important;
}
.pm-disabled-caption {
background-color: #ffc107 !important;
}
.secondary-menu[data-v-535ed182],
.standard-sidebar,
#avatar-modal .customize-section,
.alert-info,
.alert-warning,
.conversations[data-v-e6e716f4] {
background-color: #432867 !important;
}
.item-with-icon[data-v-4052e15e],
.card,
.item-with-icon[data-v-4052e15e],
.gear.box[data-v-20edc046],
.left-panel .quest-col .quest-wrapper[data-v-53ab197a],
#achievements .box[data-v-367a6e32],
#achievements .box.achievement-unearned[data-v-367a6e32],
.white[data-v-20edc046],
.quick-add[data-v-a51310ce],
.quick-add[data-v-a51310ce]:hover {
background-color: unset !important;
}
.tasks-list[data-v-49d1d854],
.tier-list li[data-v-64248106],
blockquote[data-v-3b652935],
.box[data-v-9e5a1ba8],
.gem-deck[data-v-1fa1404c],
.well[data-v-20edc046],
#achievements .box[data-v-414cf09a],
#achievements .box.achievement-unearned[data-v-414cf09a],
.box[data-v-20edc046],
.box[data-v-9a117276] {
background: unset !important;
}
.btn-secondary,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
.show > .btn-secondary.dropdown-toggle:not(.btn-success),
.spell[data-v-2e210baf],
.autocomplete-selection {
box-shadow: none !important;
}
.left-panel[data-v-53ab197a] {
box-shadow: 0 2px 16px 0 rgb(26 24 29 / 32%)
}
.task-content[data-v-02609699] {
box-shadow: 0px 0px 5px #00002A;
}
.dropdown .dropdown-menu[data-v-6b6f97f6] .dropdown-separated,
.box[data-v-367a6e32],
#achievements .box[data-v-367a6e32],
[data-v-02609699]:focus {
border: none;
}
.spell[data-v-2e210baf] {
border: 1px solid #000;
}
.spell[data-v-2e210baf]:hover:not(.disabled) {
border: 1px solid #6610f2;
}
.filter.active[data-v-a51310ce] {
border-bottom: 2px solid #fff;
}
.modal-header {
border-bottom: 0;
}
.modal-content {
border-radius: 10px !important;
}
.checklist-component .checklist-group {
border-bottom: none;
}
.checklist-component .checklist-group:first-of-type,
.checklist-component .top-border,
.modal-footer {
border-top: none;
}
#achievements .box[data-v-414cf09a],
#achievements .box.achievement-unearned[data-v-414cf09a],
.box[data-v-20edc046],
.toggle-checkbox[data-v-17699435] {
border: none;
}
.card-body[data-v-4ce44a78] {
box-shadow: 0px 0px 5px #00002A;
}
.header-wrap[data-v-1fa1404c] {
background-image: none;
}
.positive-icon[data-v-67664c4d] {
margin-left: 5px;
margin-right: 5px;
}
#invite-modal___BV_modal_outer_ .modal-content,
.tasks-list[data-v-49d1d854] {
padding: 0px !important;
}
.item-with-icon[data-v-4052e15e] {
box-shadow: 0px 0px 5px #00002A;
}
.gear.box[data-v-20edc046],
.left-panel .quest-col .quest-wrapper[data-v-53ab197a],
#achievements .box[data-v-367a6e32],
#achievements .box.achievement-unearned[data-v-367a6e32],
.white[data-v-20edc046],
.box[data-v-9a117276] {
box-shadow: none !important;
}
.quest-active-section .quest-box[data-v-55afabf7] {
background-image: unset;
}
.card {
margin-bottom: 5px !important;
}
.pm-disabled-caption {
width: 100%;
padding-bottom: 15px;
}
.quick-add[data-v-a51310ce],
.quick-add[data-v-a51310ce]:hover {
border-bottom: 1px solid #fff;
margin-bottom: 0;
}
.quick-add-tip[data-v-a51310ce],
footer,
.tags-select,
.column-background[data-v-a51310ce],
.tasks-navigation,
.box hr {
display: none;
}
}