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 as such.
@-moz-document url-prefix("https://habitica.com/") {
/* ==UserStyle==
@name Helix's Habitica Dark
@version 2.6.9
@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 as such.
@author tripplehelix
@license CC-BY-4.0
@namespace https://greasyfork.org/users/697440
==/UserStyle== */
:focus {
outline: unset !important;
}
.chatBox {
font-size: 1.2em !important;
}
*,
.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],
.task-reward-control-bg .small-text,
.task-bad-modal-headings,
.task-bad-modal-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],
.task-good-modal-headings::placeholder,
.task-good-modal-text::placeholder,
.task-neutral-modal-headings::placeholder,
.task-neutral-modal-text::placeholder,
.task-better-modal-headings::placeholder,
.task-better-modal-text::placeholder,
.task-worst-modal-text::placeholder,
.task-worst-modal-headings::placeholder,
.task-bad-modal-headings::placeholder,
.task-bad-modal-text::placeholder,
.task-best-modal-headings::placeholder,
.task-best-modal-text::placeholder,
.pm-disabled-caption h4,
.pm-disabled-caption p {
color: #343a40 !important;
}
.markdown a,
.bubble a,
.at-text,
.at-highlight {
color: #20c997 !important;
}
.due-overdue span {
color: #f74e52 !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,
.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],
.form-control,
.card-body[data-v-98d735e4],
#private-message .header-bar,
.groupHR,
#participant-list .modal-footer {
background-color: #36205D !important;
}
.btn-secondary {
background-color: #4f2a93 !important;
}
.badge-purple,
.badge-default,
.slider-button,
.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],
#private-message .full-width,
.conversations[data-v-7a22a3be],
#avatar-modal #backgrounds .background-set,
.card-body[data-v-929c3d32],
.card[data-v-60bfde4d],
.task-content[data-v-02609699],
.card-body[data-v-4ce44a78],
.toggle-checkbox.checked[data-v-17699435],
.task-content[data-v-4d3c31d9],
#sell-modal .modal-footer {
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,
.subscribe-card .bg-gray-700,
.sidebar,
.tag[data-v-aef69f00],
.full-width[data-v-e6e716f4],
#private-message .disable-background,
.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,
.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],
.spell,
.category-box,
.category-select,
.apply-options,
#chatWrapper .chatBox_content,
#groupsBox .groupsBox_content,
.collapse-checklist {
background-color: #4e4a57 !important;
}
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):active,
.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,
#private-message .messages-column,
.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],
#private-message .messages-column .empty-messages,
.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],
.group-item,
.chatBox_input {
background-color: #6c757d !important;
}
.btn-secondary:not(:disabled):not(.disabled):hover,
.input-group-spaced,
.tag[data-v-5cdfd8b6],
.box[data-v-5cdfd8b6],
.header-bar[data-v-7a22a3be],
.box[data-v-aef69f00],
#buy-gems .modal-header,
.challenge[data-v-35e659de],
.chatMessage .bubble,
.box {
background-color: #6133b4 !important;
}
.autocomplete-selection,
.at-highlight {
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,
.conversation.active[data-v-00e3fa3c],
.reward-control,
.group-item:hover,
.group-item.openChatBox {
background-color: #6f42c1 !important;
}
.unreadMessages,
.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],
.chatBox_input button,
.groupsBox_title,
#chatWrapper .chatBox_title,
.chatBox_shower,
.chatBox,
#groupsBox .groupsBox_shower,
#groupsBox,
.standard-page .item-with-icon:not(.gem-bank) {
background-color: #432867 !important;
}
.card,
.gear.box[data-v-20edc046],
.left-panel .quest-col .quest-wrapper[data-v-53ab197a],
.white[data-v-20edc046],
.quick-add[data-v-a51310ce],
.quick-add[data-v-a51310ce]:hover,
.icon-item[data-v-283c054f],
.task,
#yesterdaily___BV_modal_body_ .tasks-list {
background-color: unset !important;
}
.tier-list li,
blockquote[data-v-3b652935],
.gem-deck,
.well[data-v-20edc046],
#achievements .box,
#achievements .box.achievement-unearned,
.box[data-v-20edc046],
.box[data-v-9a117276],
.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,
.actions .btn-group[data-v-757a1a7c]:active {
background: unset !important;
}
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
.show > .btn-secondary.dropdown-toggle:not(.btn-success),
.spell,
.autocomplete-selection,
.icon-item[data-v-283c054f],
.group-item,
.group-item:hover {
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;
}
.standard-page .item-with-icon:not(.gem-bank),
.card-body[data-v-4ce44a78] {
box-shadow: 0px 0px 1px #00002A !important;
}
.toggle-checkbox[data-v-17699435]:not(.disabled):not(:disabled):active,
.toggle-checkbox[data-v-17699435]:not(.disabled):not(:disabled):focus,
button:focus {
outline: none;
}
.dropdown .dropdown-menu[data-v-6b6f97f6] .dropdown-separated,
.box[data-v-367a6e32],
#achievements .box,
.group-item,
.group-item:hover,
.chatBox_input textarea,
.chatBox_input,
[data-v-4d3c31d9]:focus {
border: none !important;
}
.spell,
.btn-secondary:not(:disabled):not(.disabled):hover,
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled):hover {
border: 1px solid #000;
}
.spell:hover:not(.disabled) {
border: 1px solid #6610f2;
}
.filter.active[data-v-a51310ce] {
border-bottom: 2px solid #fff !important;
}
.modal-header,
.groupHR {
border-bottom: 0 !important;
}
.modal-content {
border-radius: 10px !important;
}
textarea,
.groupsBox_title,
#groupsBox,
.chatBox_title {
border-radius: 0 !important;
}
.checklist-component .checklist-group {
border-bottom: none !important;
}
.checklist-component .checklist-group:first-of-type,
.checklist-component .top-border,
.modal-footer {
border-top: none !important;
}
#achievements .box[data-v-414cf09a],
#achievements .box.achievement-unearned[data-v-414cf09a],
.box[data-v-20edc046],
.toggle-checkbox[data-v-17699435],
.task-clickable-area[data-v-02609699]:focus,
.group-item.openChatBox,
.card-right,
.card-left {
border: none !important;
}
.header-wrap[data-v-1fa1404c] {
background-image: none !important;
}
.positive-icon[data-v-67664c4d] {
margin-left: 5px !important;
margin-right: 5px !important;
}
#invite-modal___BV_modal_outer_ .modal-content,
.tasks-list[data-v-49d1d854] {
padding: 0px !important;
}
.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 !important;
}
.card,
.groupHR {
margin-bottom: 5px !important;
}
h1 {
margin-bottom: 0 !important;
}
.pm-disabled-caption {
width: 100% !important;
padding-bottom: 15px !important;
}
.quick-add[data-v-a51310ce],
.quick-add[data-v-a51310ce]:hover {
border-bottom: 1px solid #fff !important;
margin-bottom: 0 !important;
}
.topbar {
position: fixed !important;
top: 0 !important;
width: 100% !important;
}
.habitica-top-banner {
margin-top: 55px;
margin-bottom: -55px;
z-index: 1000 !important;
}
#participant-list___BV_modal_body_ {
padding-top: 15px;
}
.container-fluid {
padding-top: 55px !important;
}
.inline-dropdown .dropdown-toggle:after {
border-top-color: black;
}
.due-overdue .svg-icon {
fill: #f74e52;
}
#members-modal___BV_modal_body_ .dropdown-icon-item .svg-icon {
filter: grayscale(100%) !important;
filter: brightness(100) !important;
}
.quick-add-tip[data-v-a51310ce],
footer,
.tags-select,
.column-background[data-v-a51310ce],
.tasks-navigation,
.box hr,
.chatMessage.userPoster .bubble::after {
display: none !important;
}
}