skin-blue.css

/* pi-hole-midnight */
/* Custom dark theme CSS for pi-hole to replace skin-blue AdminLTE theme */
/* https://github.com/jacobbates/pi-hole-midnight/ */

body {
background:#000;
}

button,.btn-default {
background-color:#080909;
border:1px solid #666;
color:#b2b2b2;
}

input,.form-control,pre,.box-footer,.datatables_processing {
background:#080909;
border:1px solid #666;
color:#b2b2b2;
}

html {
scrollbar-3dlight-color:#3c8dbc;
scrollbar-arrow-color:#000;
scrollbar-base-color:#3c8dbc;
scrollbar-dark-shadow-color:#3c8dbc;
scrollbar-face-color:#3c8dbc;
scrollbar-highlight-color:#3c8dbc;
scrollbar-shadow-color:#3c8dbc;
scrollbar-track-color:#000;
}

::-webkit-scrollbar {
height:3px;
width:8px;
}

::-webkit-scrollbar-button,::-webkit-resizer {
background-color:#666;
}

::-webkit-scrollbar-thumb {
background-color:#3c8dbc;
border-radius:3px;
height:50px;
}

::-webkit-scrollbar-track,::-webkit-scrollbar-corner {
background-color:#3c8dbc;
}

::-webkit-scrollbar-track-piece {
background-color:#000;
}

.small-box.bg-aqua,.small-box.bg-green,.small-box.bg-red,.small-box.bg-yellow {
background:#0a0d0f!important;
border-top: 3px solid #3e4244;
}

.bg-red,.bg-yellow,.bg-aqua,.bg-blue,.bg-light-blue,.bg-green,.bg-navy,.bg-teal,.bg-olive,.bg-lime,.bg-orange,.bg-fuchsia,.bg-purple,.bg-maroon,.bg-black,.bg-red-active,.bg-yellow-active,.bg-aqua-active,.bg-blue-active,.bg-light-blue-active,.bg-green-active,.bg-navy-active,.bg-teal-active,.bg-olive-active,.bg-lime-active,.bg-orange-active,.bg-fuchsia-active,.bg-purple-active,.bg-maroon-active,.bg-black-active,.callout.callout-danger,.callout.callout-warning,.callout.callout-info,.callout.callout-success,.alert-success,.alert-danger,.alert-error,.alert-warning,.alert-info,.label-danger,.label-info,.label-warning,.label-primary,.label-success,.modal-primary .modal-body,.modal-primary .modal-header,.modal-primary .modal-footer,.modal-warning .modal-body,.modal-warning .modal-header,.modal-warning .modal-footer,.modal-info .modal-body,.modal-info .modal-header,.modal-info .modal-footer,.modal-success .modal-body,.modal-success .modal-header,.modal-success .modal-footer,.modal-danger .modal-body,.modal-danger .modal-header,.modal-danger .modal-footer {
color:#fbfbfb!important;
}

.box,.tab-content,.nav-tabs-custom>.tab-content {
background:#0a0d0f;
border-color:#3e4244;
}

.box-header.with-border {
background:#1c2021;
border:none;
color:#888;
}

.content-wrapper,.right-side {
background:#12171a;
color:#808b90;
}

.list-group-item,.input-group .input-group-addon,.panel,.panel-default>.panel-heading {
background:#1c2021;
border-color:#666;
color:#b2b2b2;
}

.main-footer {
background:#1a2226;
border-color:#30383b;
color:#b8c7ce;
}

.nav-tabs-custom,.nav-tabs-custom>.nav-tabs {
background:#0e1010;
border-color:#3e4244;
color:#b2b2b2;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
border-color:#30383b;
}

.nav-tabs-custom>.nav-tabs>li.active>a,.nav-tabs-custom>.nav-tabs>li.active:hover>a {
background-color:#0a0d0f;
color:#b2b2b2;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu,.navbar-nav>.user-menu>.dropdown-menu>.user-footer,.navbar-nav>.user-menu>.dropdown-menu>.user-body a {
background:#0c0d0e!important;
color:#b2b2b2!important;
}

.pagination>li>a,.pagination>li>span,.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
background-color:#292e30;
border-color:#414547;
color:#b2b2b2;
}

.progress {
background:#12171a;
}

.skin-blue .list-group-item:hover {
background:#292e30!important;
}

.skin-blue .main-header .navbar {
background:#222d32;
color:#b8c7ce;
}

.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav>.active>a,.skin-blue .main-header .navbar>.sidebar-toggle:hover,.skin-blue .main-header .navbar>.sidebar-toggle:active,.skin-blue .main-header>.logo:hover,.skin-blue .main-header>.logo:active {
background:#3e4244;
}

.skin-blue .main-header .navbar .navbar-nav>li>a,.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,.skin-blue .main-header .navbar .navbar-right>li>a {
border:none;
}

.skin-blue .main-header .navbar>.sidebar-toggle {
border:none;
color:#b8c7ce;
}

.skin-blue .main-header>.logo {
background:#1a2226;
border:none;
color:#b8c7ce;
}

.skin-blue .sidebar a,.skin-blue .main-header .navbar .nav>li>a {
color:#b8c7ce;
}

.skin-blue .sidebar a:hover {
text-decoration:none;
}

.skin-blue .sidebar-form {
border:1px solid #374850;
border-radius:3px;
margin:10px;
}

.skin-blue .sidebar-form .btn {
border-bottom-left-radius:0;
border-bottom-right-radius:2px;
border-top-left-radius:0;
border-top-right-radius:2px;
color:#999;
}

.skin-blue .sidebar-form input[type="text"] {
border-bottom-left-radius:2px;
border-bottom-right-radius:0;
border-top-left-radius:2px;
border-top-right-radius:0;
color:#666;
}

.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn {
background-color:#374850;
border:1px solid transparent;
box-shadow:none;
height:35px;
}

.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
border-left-color:#fff;
}

.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
background-color:#fff;
color:#666;
}

.skin-blue .sidebar-menu .treeview-menu>li.active>a,.skin-blue .sidebar-menu .treeview-menu>li>a:hover {
color:#fff;
}

.skin-blue .sidebar-menu .treeview-menu>li>a {
color:#8aa4af;
}

.skin-blue .sidebar-menu>li.active>a {
border-left-color:#3c8dbc;
}

.skin-blue .sidebar-menu>li.header {
background:#1a2226;
color:#4b646f;
}

.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a,.skin-blue .sidebar-menu>li.menu-open>a {
background:#1e282c;
color:#fff;
}

.skin-blue .sidebar-menu>li>.treeview-menu {
background:#2c3b41;
margin:0 1px;
}

.skin-blue .sidebar-menu>li>a {
border-left:3px solid transparent;
}

.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a,.nav-tabs-custom>.nav-tabs>li>a {
color:#b2b2b2;
}

.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side,.skin-blue .main-sidebar,.skin-blue .left-side {
background-color:#222d32;
}

.table-bordered,.table-responsive,.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td {
border-color:#12171a;
}

.table-striped>tbody>tr:nth-of-type(odd) {
background-color:#101417;
}

.layout-boxed {
background-color:#0a0d0f !important;
background-image:none !important;
}

.chart svg, .chart canvas, .chartjs-render-monitor, .chart-legend {
-webkit-filter: invert(100%);
filter: invert(100%); 
}

#chartjs-tooltip {
filter: invert(100%);
}

.small-box .icon{
color: rgba(255,255,255,0.15);
}

#all-queries tr td:nth-child(6){
  color: #808b90 !important;
}