ntopng/httpdocs/css/dark-mode.css

html, body {
  background-color: #121212 !important;
  color: #eee;
}

svg:not(.leaflet-zoom-animated) {
  background-color: #121212;
  color: #eee;
}

#ntop-logo > svg, svg.peity {
  background: none;
}

a,.btn-link {
  color: #ff8a26;
}
a:hover, .btn-link:hover {
  color: #f39f55;
}

.btn {
  color: #eee;
}

.btn:hover {
  color: #d6d6d6;
}

.btn-light {
  color: #eee;
  background-color: #232323;
  border-color: #272727;
}
.btn-light:hover {
  color: #eee;
  background-color: #333333;
  border-color: #272727;
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
  color: #eee;
  background-color: #333333;
  border-color: #272727;
}

.dropdown-header {
  color: #9a9a9a;
}
.dropdown-divider {
  border-top: 1px solid #0a0a0a
}

.bg-primary {
    background-color: #ff8a26 !important;
}

.bg-light, .card, .card-body {
  background-color: #1f1f1f !important;
  color: #e2e2e2 !important;
}

.bg-white {
  background-color: #1f1f1f !important;
  color: #e2e2e2;
}

.bg-black {
  background-color: #eee !important;
}

.info-stats a {
  color: #e2e2e2 !important;
}

.navbar-light, .navbar-light .navbar-brand, ul.navbar-nav li.nav-item > a {
  color: #e2e2e2 !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #ff7500;
}

ul.navbar-nav li.nav-item.active > a.active {
  color: #e9e9e9 !important;
  font-weight: 600;
}

.breadcrumb {
  background-color: #1d1d1d !important;
}
.breadcrumb-item.active {
    color: #a2a2a2;
}

.dropdown-menu {
  background-color: #1d1d1d !important;
  color: #eee;
}

.blog-section a, .blog-section h6, .blog-section i, .blog-section p, .blog-section small,
.dropdown-item {
  color: #e2e2e2;
}
.blog-section a:hover p, .blog-section a:hover small, .blog-section a:hover h6, .blog-section a:hover i {
  color: #F39F53;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #2c2c2c !important;
  color: #e2e2e2;
}

.popover {
    background-color: #343434;
}
.popover-body {
    color: #eee;
}
.popover-header {
    background-color: #323232;
  color: #eee;
  border-bottom: 1px solid #272727;
}

.table {
  background-color: #1f1f1f !important;
  color: #e2e2e2 !important;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
  border: 1px solid #2c2c2c;
}

.table thead th {
  border-bottom: 2px solid #2c2c2c;
}
.table td,
.table th {
  border-top: 1px solid #2c2c2c !important;
  border-color: #2c2c2c !important;
}
.table-hover tbody tr:hover {
  color: #e2e2e2 !important;
  background-color: rgba(48, 48, 48) !important;
}
.table .thead-light th {
  color: #e2e2e2 !important;
  background-color: #333;
}
.tablesorter,
table.tablesorter thead tr th,
table.tablesorter tfoot tr th {
  background-color: #2c2c2c !important;
}
table.tablesorter tbody td {
  background-color: #121212 !important;
  color: #e2e2e2 !important;
}

.btn-outline-dark {
  border-color: #f8f9fa !important;
}
.btn-outline-dark:hover,  ul.navbar-nav li.nav-item > a.btn-outline-dark:hover {
  color: #212529 !important;
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
}

.pagination .page-item .page-link,
.list-group-item {
  background-color: #2d2d2d !important;
  border: 1px solid #262626;
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  color: #636363 !important;
}
.pagination .page-item.active .page-link {
  background-color: #ff7500 !important;
  color: #fff !important;
}

.list-group-item.active {
  background-color: #ff8a26 !important;
  border-color: #e26a04;
}

.nav-tabs {
    border-bottom: 1px solid  #212121;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #eee;
    background-color: #262626;
    border-color: #2c2c2c #2c2c2c #212121;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #2c2c2c #2c2c2c #212121;
}

.modal-header, .modal-footer {
    border-color: #2c2c2c !important;
}
.modal-content {
    background-color: #242424;
}

.alert-light {
    background-color: #1f1f1f !important;
    color: #eee;
    border-color: #2c2c2c;
}

.filter-scripts-button {
    color: #ff7500 !important;
}
.filter-scripts-button:hover {
    color: #f39f55 !important;
}
.filter-scripts-button.active {
    background-color: #ff7500 !important;
    color: #eee !important;
}

.form-control {
  color: #d1d1d1;
  background-color: #181818;
  border: 1px solid #3c3c3c;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #696969;
}
.form-control:focus {
    border-color: #f39f55;
    background-color: #333333;
    color: #eee;
    box-shadow: 0 0 0 0.2rem rgba(255, 118, 0, 0.25);
}
.input-group-text {
    color: rgb(216, 216, 216);
    background-color: #232323;
    border: 1px solid #3c3c3c;
}

.form-signin {
    background-color: #242424 !important;
    border: 1px solid #3c3c3c !important;
}

.progress {
  background-color: #383838;
}

.pie-chart, table.table svg, table.table .pie-chart circle {
  background-color: #1d1d1d;
}

.pie-chart circle {
  fill: #121212 !important;
}
text, g text.tick {
  fill: #eee;
  text-shadow: none;
}

.table tbody+tbody {
  border-top: 2px solid #464646
}

#legend {
  background: transparent !important;
  color: #ccc !important;
}

.switches-list-container {
  background: none  !important;
}

.border-top {
  border-top: 1px solid #2d2d2d!important;
}
.border-bottom {
  border-bottom: 1px solid #2d2d2d!important;
}
.border-left {
  border-left: 1px solid #2d2d2d!important;
}
.border-right {
  border-right: 1px solid #2d2d2d!important;
}

.btn-primary, .primary {
  color: #000;
}