A modern and clean dark theme for Mantis. Designed with better contrast, updated UI elements, and IBM Plex font. Un tema oscuro, moderno y limpio para Mantis.
Mantis Dark UX by ActiveSoft by ActiveSoft-uy
Details
AuthorActiveSoft-uy
LicenseMIT
Categorytest.userstyles.world
Created
Updated
Code size15 kB
Code checksumf1ddc3fa
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
✨ Features / Características:
Dark theme with modern palette / Tema oscuro con paleta moderna
IBM Plex Sans and Mono fonts for improved legibility / Tipografía moderna y legible
Redesigned buttons, labels and layout / Rediseño de botones, etiquetas y estructura
Smooth spacing and consistent shadows / Espaciado armonioso y sombras suaves
Easy to install with Stylus extension / Fácil de aplicar con la extensión Stylus
🧪 Requirements / Requisitos:
Stylus browser extension
Target domain: mantis.com or other MantisBT instances
🛠 Future ideas / Ideas a futuro:
Dark mode variant toggle / Modo oscuro con interruptor
More compact table view / Vista compacta opcional
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Mantis Dark UX by ActiveSoft
@version 20250428.19.29
@namespace ?
@description A modern and clean dark theme for Mantis. Designed with better contrast, updated UI elements, and IBM Plex font. Un tema oscuro, moderno y limpio para Mantis.
@license MIT
==/UserStyle== */
@-moz-document domain("mantis.solidatec.com") {
/*Victoria Crosina*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;700&family=IBM+Plex+Mono:wght@300;400;500;700&display=swap');
html {
background-color: #ffffff !important
}
*:not(i) {
font-family: 'IBM Plex Sans' !important;
font-style: normal;
font-weight: 400;
}
body {
font-family: 'IBM Plex Sans' !important;
font-style: normal;
font-weight: 400;
background-color: #ffffff !important
}
.navbar {
background-color: #323232 !important
}
.nav-tabs > li.active > a {
border-top: 2px solid #03DAC5 !important
}
.nav-tabs a {
background-color: #ccc !important;
color: #4a4a4a !important
}
.nav-tabs a:hover {
background-color: #505050 !important;
color: #fafafa !important
}
.dropdown-toggle {
background-color: #505050 !important
}
.dropdown-toggle:hover {
background-color: #464646 !important
}
.dropdown-menu {
background-color: #3c3c3c !important
}
.dropdown-menu a {
color: #e6e6e6 !important
}
.dropdown-menu .search {
background-color: #3c3c3c !important;
color: #e6e6e6 !important
}
.dropdown-menu li.active:hover > a, .dropdown-menu li.active > a, .dropdown-menu li:hover > a, .dropdown-menu li > a:active, .dropdown-menu li > a:focus {
background-color: #03DAC5 !important;
color: #f0f0f0 !important
}
.btn.btn-white, .btn-primary, .btn.btn-white.btn-primary {
background-color: #BB86FC !important;
border-color: transparent !important;
border: 0 !important;
color: #121212 !important;
border-radius: 16px !important;
padding: 3px 12px !important;
}
.btn.btn-white.active,
.btn-primary.active,
.btn.btn-white.btn-primary.active {
background-color: #000 !important;
}
.btn.btn-white:hover, .btn-primary:hover, .btn.btn-white.btn-primary:hover {
background-color: #4a4a4a !important;
}
.main-content, .page-content, .main-container, .main-container:before, .main-container.container:before, .skin-3 .main-container:before {
background: #212121 !important;
background-color: #212121 !important
}
.footer-content {
background-color: #212121 !important;
border-top-color: #03DAC5 !important;
border-top-style: dotted !important;
border-top-width: 1px !important
}
.label {
background-color: #03DAC5 !important;
color: #121212;
border-radius: 18px;
padding: 3px 10px;
}
.label:before {
border-right-color: #03DAC5 !important
}
.label.arrowed-in-right:after {
border-color: #03DAC5 !important;
border-right-color: transparent !important
}
.breadcrumbs {
border-radius: 0 !important;
background-color: #393E46 !important;
padding: 10px !important;
}
.breadcrumbs a {
color: #ccc !important
}
.breadcrumbs .nav-recent {
color: #ccc !important;
padding: 10px !important;
}
.breadcrumbs .nav-search {
top: 16px;
}
.breadcrumbs .nav-search-input {
background-color: #212121 !important;
border-color: transparent !important;
color: #f0f0f0 !important;
border-radius: 18px !important;
}
.breadcrumbs .nav-search-icon {
color: #fff !important
}
.input-icon > input {
padding-left: 30px;
padding-right: 10px;
}
.widget-header {
background-color: #212121 !important;
border-color: #ccc !important
}
.widget-header .white:hover {
color: #c8c8c8 !important
}
.widget-header .badge {
background-color: #BB86FC !important
}
.widget-box, .widget-main {
background-color: #222831 !important;
border-color: transparent !important;
border: 0 !important;
}
.widget-box {
box-shadow: 0px 0px 5px #ccc;
}
.table {
background-color: inherit !important
}
.table-bordered {
border: 0 !important;
border-color: transparent !important;
background-color: #222831 !important
/*ACA TENGO MI VICKY*/
}
.widget-body {
background-color: transparent !important;
color: #ccc !important
}
.widget-body .table a {
color: #BB86FC !important;
font-weight: bold;
}
.widget-body .table a.tagi-brighter {
color: #babaff !important;
font-weight: bold
}
.widget-body .table a.btn {
color: #fafafa !important
}
.widget-body .table th {
background-color: #252525 !important;
border-color: #ccc !important;
color: #ccc !important;
padding: 20px !important;
font-weight: 100 !important;
border: 0 !important;
}
.widget-body .table th {
/*color: #e6e6e6 !important*/
}
.widget-body .table td {
border-color: #ccc !important
}
.widget-body .table thead {
background-color: #505050 !important
}
.widget-body .table thead tr {
background-color: inherit !important
}
.widget-body .table thead tr td {
background-color: #fff !important;
border-bottom: 1px solid silver !important;
color: #4a4a4a !important;
}
.buglist-headers{
border-bottom: 1px solid silver !important;
}
.widget-body .fa-pencil {
color: #DDC3FE !important
}
.widget-body .table-responsive {
background-color: #d2d2d2 !important;
color: #d2d2d2 !important
}
.widget-body .table-striped > tbody > tr:nth-of-type(odd) {
background-color: transparent !important
}
.widget-body .table-striped > tbody > tr:nth-of-type(even):hover,
.widget-body .table-striped > tbody > tr:nth-of-type(odd):hover {
/*background-color: #ccc !important*/
}
.widget-body .table-striped > tbody > tr {
background-color: #212121 !important
}
.widget-body .table-striped > tbody > tr:hover {
/*background-color: #ccc !important*/
}
.widget-body .profile-activity {
border-color: transparent !important
}
.profile-activity:nth-of-type(even) {
background-color: #212121 !important
}
.profile-activity:nth-of-type(odd):hover {
background-color: #fff !important
}
.profile-activity:hover {
background-color: #eee !important;
}
.widget-body .profile-activity:hover {
/*background-color: #ccc !important*/
}
.widget-toolbox {
border: 0 !important;
background-color: #22252A !important;
border-color: transparent !important
}
.table-hover > tbody > tr:hover {
/*background-color: inherit !important*/
}
.table-hover > tbody > tr.spacer:hover {
background-color: #ccc !important
}
.btn-toolbar {
padding: 10px 0 !important;
background-color: transparent !important
}
.form-inline .input-sm {
background-color: #22252A !important;
border-color: #3c3c3c !important;
color: #fafafa !important
}
.form-control, .input-sm, input {
background-color: #212121 !important;
border-color: #3c3c3c !important;
color: #fafafa !important
}
select {
background-color: #505050 !important;
color: #e6e6e6 !important
}
.skin-3 .sidebar {
background-color: #22252A !important;
border-color: #212121 !important
}
.nav-list, .skin-3 .nav-list > li, .skin-3 .nav-list > li > a, .skin-3 .nav-list > li.active > a {
background-color: inherit !important;
border-color: #ccc !important
}
.nav-list:hover, .skin-3 .nav-list > li:hover, .skin-3 .nav-list > li > a:hover, .skin-3 .nav-list > li.active > a:hover {
border-color: #3c3c3c !important
}
.nav-list a:hover, .skin-3 .nav-list > li a:hover, .skin-3 .nav-list > li > a a:hover, .skin-3 .nav-list > li.active > a a:hover {
background-color: #bbb !important;
border-color: #bbb !important;
color: white;
}
.nav-list a:hover span, .skin-3 .nav-list > li a:hover span, .skin-3 .nav-list > li > a a:hover span, .skin-3 .nav-list > li.active > a a:hover span {
background-color: transparent !important
}
.nav-list li.active > a:before, .skin-3 .nav-list > li li.active > a:before, .skin-3 .nav-list > li > a li.active > a:before, .skin-3 .nav-list > li.active > a li.active > a:before {
color: rgba(0, 0, 0, 0) !important;
border-right-color: #03DAC5 !important
}
.nav-list > li:before, .nav-list > li:after, .skin-3 .nav-list > li > li:before, .skin-3 .nav-list > li > li:after, .skin-3 .nav-list > li > a > li:before, .skin-3 .nav-list > li > a > li:after, .skin-3 .nav-list > li.active > a > li:before, .skin-3 .nav-list > li.active > a > li:after {
background-color: #03DAC5 !important
}
.skin-3 .nav-list > li.open:before, .skin-3 .nav-list > li:hover:before {
background-color: #03DAC5 !important
}
.skin-3 .sidebar.menu-min .nav-list > li > a > .menu-text {
border-color: #ccc !important
}
.skin-3 .nav-list > li.active, .skin-3 .nav-list > li.active + li {
border-color: #ccc !important
}
.skin-3 .nav-list > li.active:before, .skin-3 .nav-list > li.active + li:before {
background-color: #03DAC5 !important
}
.skin-3 .nav-list > li:hover + li {
border-top-color: rgba(0, 0, 0, 0) !important
}
.menu-icon {
color: #4a4a4a !important
}
.arrow {
z-index: -1;
background-color: none !important
}
.arrow::after {
border-right-color: #03DAC5 !important
}
.menu-text {
color: #ccc !important;
background-color: transparent !important
}
.sidebar-toggle, .skin-3 .sidebar-toggle {
background-color: inherit !important;
border-color: #212121 !important;
color: #03DAC5 !important;
border-bottom: 0 !important;
padding: 20px 0 !important;
}
.sidebar-toggle > .ace-icon, .skin-3 .sidebar-toggle > .ace-icon {
backgro...