ntopng/httpdocs/css/dark-mode.css

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

svg {
  background-color: #121212 !important;
  color: #eee;
}

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

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

.bg-light {
  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;
}

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;
}
.dropdown-item {
  color: #e2e2e2;
}
.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: #adadad;
  background-color: #181818;
  border: 1px solid #3c3c3c;
}
.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;
}

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