ntopng/http_src/views/private/clients/dark-mode.scss

:root {
    --sidebar-width: 4.5rem;
    --footer-height: 4rem;
    --padding-md-four: 1.5rem;
    --scrollable-dropdown-height: 20rem;

    --ntop-orange: #FF8F00;
    --ntop-orange-light: #FFC046;
    --ntop-orange-dark: #C56000;

    --ntop-blue: #2C3E50;
    --ntop-blue-light: #52677A;
    --ntop-blue-dark: #1A2530;

    --text-color: #e0e0e0 --body-bg: #F8FAFC;
    --body-color: #1E293B;
    --card-bg: #FFFFFF;
    --card-border: #E2E8F0;
    --input-bg: #FFFFFF;
    --input-border: #CBD5E1;
    --input-color: #334155;
    --dropdown-bg: #212529;
    --dropdown-border: #E2E8F0;
    --dropdown-link-hover: #F1F5F9;
    --modal-bg: #FFFFFF;
    --modal-border: #E2E8F0;
    --badge-bg: #F1F5F9;
    --badge-color: #64748B;
    --btn-default-bg: #F1F5F9;
    --btn-default-border: #CBD5E1;
    --btn-default-color: #334155;
    --btn-primary-bg: var(--ntop-orange);
    --btn-primary-border: var(--ntop-orange);
    --btn-primary-color: #FFFFFF;
    --btn-secondary-bg: var(--ntop-blue);
    --btn-secondary-border: var(--ntop-blue);
    --btn-secondary-color: #FFFFFF;
    --datepicker-bg: #FFFFFF;
    --datepicker-border: #E2E8F0;
    --datepicker-selected: var(--ntop-orange);
    --datepicker-selected-text: #FFFFFF;
    --code-bg: #F1F5F9;
    --code-color: #334155;
    --scrollbar-track: #F1F5F9;
    --scrollbar-thumb: #CBD5E1;
    --scrollbar-thumb-hover: #94A3B8;
    --table-header-bg: #F8FAFC;
    --table-border: #E2E8F0;
    --table-hover-bg: #F1F5F9;
    --table-text: #334155;
}

html,
body,
#particles-js {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

input {
    color: #E2E2E2;
}

code {
    color: #F8F8F2 !important;
}

.btn-warning {
    color: #000000 !important;
}

.graph-val-total-title,
.graph-val-95percentile-title,
.graph-val-average-title,
.graph-val-max-title,
.graph-val-total {
    border-color: #2C2C2C !important;
}

.ntop_notes {
    color: #FFFFFF;
}

.leaflet-top.leaflet-left {
    z-index: auto;
}

.btn-primary {
    color: #000000;
    background-color: var(--ntop-orange);
    border-color: var(--ntop-orange);
}

.btn-primary:hover {
    color: #000000;
    background-color: #FFA026;
    border-color: #FF9A1A;
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    color: #000000;
    background-color: #FFA026;
    border-color: #FF9A1A;
    box-shadow: 0 0 0 0.25rem #D97A0080;
}

.btn-check:checked+.btn-primary,
.btn-check:active+.btn-primary,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
    color: #000000;
    background-color: #FFA533;
    border-color: #FF9A1A;
}

.btn-check:checked+.btn-primary:focus,
.btn-check:active+.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem #D97A0080;
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #000000;
    background-color: var(--ntop-orange);
    border-color: var(--ntop-orange);
}

.btn-secondary {
    color: #FFFFFF;
    background-color: var(--ntop-blue);
    border-color: var(--ntop-blue);
}

.btn-secondary:hover {
    color: #FFFFFF;
    background-color: #2F3C43;
    border-color: #2C393F;
}

.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
    color: #FFFFFF;
    background-color: #2F3C43;
    border-color: #2C393F;
    box-shadow: 0 0 0 0.25rem rgba(85, 99, 105, 0.5);
}

.btn-check:checked+.btn-secondary,
.btn-check:active+.btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show>.btn-secondary.dropdown-toggle {
    color: #FFFFFF;
    background-color: #212529;
    border-color: #29353B;
}

.btn-check:checked+.btn-secondary:focus,
.btn-check:active+.btn-secondary:focus,
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(85, 99, 105, 0.5);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    color: #FFFFFF;
    background-color: var(--ntop-blue);
    border-color: var(--ntop-blue);
}

.alert-primary {
    color: #995600;
    background-color: #FFE9CC;
    border-color: #FFDDB3;
}

.alert-primary .alert-link {
    color: #7A4500;
}

.alert-secondary {
    color: #212B2F;
    background-color: #D7DADC;
    border-color: #C3C8CA;
}

.alert-secondary .alert-link {
    color: #1A2226;
}

.list-group-item-primary {
    color: #995600;
    background-color: #FFE9CC;
}

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
    color: #995600;
    background-color: #E6D2B8;
}

.list-group-item-primary.list-group-item-action.active {
    color: #FFFFFF;
    background-color: #995600;
    border-color: #995600;
}

.list-group-item-secondary {
    color: #212B2F;
    background-color: #D7DADC;
}

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
    color: #212B2F;
    background-color: #C2C4C6;
}

.list-group-item-secondary.list-group-item-action.active {
    color: #FFFFFF;
    background-color: #212B2F;
    border-color: #212B2F;
}

.link-primary {
    color: var(--ntop-orange);
}

.link-primary:hover,
.link-primary:focus {
    color: #FFA533;
}

.link-secondary {
    color: var(--ntop-blue);
}

.link-secondary:hover,
.link-secondary:focus {
    color: #2C393F;
}

.border-primary {
    border-color: var(--ntop-orange) !important;
}

.border-secondary {
    border-color: var(--ntop-blue) !important;
}

.text-primary {
    color: var(--ntop-orange) !important;
}

.text-secondary {
    color: var(--ntop-blue) !important;
}

.pie-chart {
    background-color: transparent !important;
}

svg:not(.leaflet-zoom-animated) {
    color: #EEEEEE;
}

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

a,
.btn-link {
    color: #FF8A26;
}

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

.btn:hover {
    color: #D6D6D6;
}

.btn-light {
    color: #EEEEEE;
    background-color: #232323;
    border-color: #272727;
}

.btn-light:hover {
    color: #EEEEEE;
    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: #EEEEEE;
    background-color: #212529;
    border-color: #272727;
}

.dropdown-header {
    color: #9A9A9A;
}

.dropdown-divider {
    border-top: 1px solid #0A0A0A;
}

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

.bg-light,
.card {
    background-color: #212529 !important;
    border-color: transparent !important;
    color: #E2E2E2 !important;
}

.bg-white {
    background-color: #212529 !important;
    color: #E2E2E2;
}

.bg-black {
    background-color: #EEEEEE !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;
}

.nav-link {
    color: #FFFFFF80 !important;
}

.extrainfo {
    position: absolute;
    z-index: 1;
    border-radius: 4px;
    left: 8px;
    top: 8px;
    padding: 8px;
    background: #00000080;
}

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

.breadcrumb {
    background-color: #0d1117 !important;
}

.breadcrumb-item.active {
    color: #A2A2A2;
}

.blog-section a,
.blog-section h6,
.blog-section i,
.blog-section p,
.blog-section small {
    color: #F39F53 !important;
}

.blog-section a:hover p,
.blog-section a:hover small,
.blog-section a:hover h6,
.blog-section a:hover i,
.list-group-item-action:focus,
.list-group-item-action:hover {
    background-color: #0d1117 !important;
    cursor: pointer;
    color: #F39F53;
}

.dropdown-item:hover,
a.dropdown-item:hover,
.dropdown-item:hover {
    background-color: #0d1117 !important;
    color: #F39F53 !important;
    cursor: pointer;
}

.popover {
    background-color: #343434;
}

.popover-body {
    color: #EEEEEE;
}

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

.table {
    background-color: #212529 !important;
    color: #E2E2E2 !important;
}

.table-primary {
    --bs-table-bg: #161616 !important;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border: 1px solid #2C2C2C;
}

.table thead th {
    background-color: #212529 !important;
    border-bottom: 2px solid #2C2C2C;
}

.table td,
.table th {
    background-color: #212529 !important;
    border-top: 1px solid #2C2C2C !important;
    border-right-color: #2C2C2C !important;
    border-top-color: #2C2C2C !important;
    border-bottom-color: #2C2C2C !important;
    color: #E2E2E2;
}

.table-hover tbody tr:hover {
    color: #E2E2E2 !important;
    background-color: #1f2226 !important;
}

.table .thead-light th {
    color: #E2E2E2 !important;
    background-color: #333333;
}

.tablesorter,
table.tablesorter thead tr th,
table.tablesorter tfoot tr th {
    background-color: #2C2C2C !important;
}

.table-borderless> :not(caption)>*>* {
    background-color: #212529;
}

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: #FFFFFF;
}

.pagination .page-item.disabled .page-link {
    color: #636363 !important;
}

.pagination .page-item.active .page-link {
    background-color: #FF7500 !important;
    color: #FFFFFF !important;
}

ul.navbar-nav li.nav-item.active>a.active {
    color: #FF7500 !important;
}

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

.nav-tabs {
    border-bottom: 0px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #FFFFFF !important;
    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: #212529 !important;
}

.alert-light {
    background-color: #212529 !important;
    color: #EEEEEE;
    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: #EEEEEE !important;
}

.form-control,
.form-select,
.btn[role='combobox'] {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
    border: 1px solid #3C3C3C !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #696969;
}

.form-control:focus {
    border-color: #F39F55;
    background-color: #333333;
    color: #EEEEEE;
    box-shadow: 0 0 0 0.2rem #FF760040;
}

.input-group-text {
    color: #D8D8D8;
    background-color: #232323;
    border: 1px solid #3C3C3C;
}

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

.progress {
    background-color: #383838;
}

.pie-chart circle {
    fill: #121212 !important;
}

text,
g text.tick {
    fill: #EEEEEE;
    text-shadow: none;
}

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

#legend {
    background: transparent !important;
    color: #CCCCCC !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: #000000;
}

.border {
    border: 1px solid #323232 !important;
}

.nvd3 .nv-axis line,
.nvd3 .nv-axis path {
    stroke-width: 0.8px !important;
    stroke: #2C2C2C !important;
}

.widget-name {
    align-items: center;
}

.modal-header .close {
    color: #FFFFFF;
}

#n-navbar {
    border-radius: 0px !important;
}

#n-navbar.scrolled.bg-light {
    background-color: #151515 !important;
}

.toast {
    box-shadow: 0 20px 25px -5px #FFFFFF1A, 0 10px 10px -5px #FFFFFF0A;
}

.toast,
.toast-body {
    background-color: #101010D9;
}

.btn-gray {
    background-color: #414141 !important;
}

.tagify__input {
    color: #EEEEEE !important;
}

.apexcharts-tooltip .apexcharts-tooltip-title {
    background-color: #414141 !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
    background-color: #202020 !important;
}

.btn-close {
    color: #FFFFFF;
    background: transparent url('data:image/svg+ xml,%3csvg xmlns= \'http://www.w3.org/2000/svg\' viewBox= \'0 0 16 16\' fill= \'%23fff\'%3e%3cpath d= \'M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z\'/%3e%3c/svg%3e') center/1em auto no-repeat;
}

.btn-edit {
    color: #FFFFFF;
    background: transparent url('data:image/svg+ xml,%3csvg xmlns= \'http://www.w3.org/2000/svg\' viewBox= \'0 0 16 16\' fill= \'%23fff\'%3e%3cpath d= \'M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z\'/%3e%3c/svg%3e') center/1em auto no-repeat;
}

.highlighted-json {
    white-space: pre-wrap;
    font-family: monospace;
    color: white;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #3e3d3d;
}

.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
    border-color: var(--ntop-orange-dark);
}

.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active,
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus {
    background-color: var(--ntop-orange) !important;
    color: #E2E2E2 !important;
}

summary,
.apexcharts-legend-text {
    color: #E2E2E2 !important;
}

.fa-external-link-alt {
    color: #FF8A26;
    cursor: pointer;
}

.btn {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: #EEEEEE;
}


li>a>.fa-external-link-alt {
    color: #FF8A26;
}

.widget-box {
    background-color: #212529;
}

.flatpickr {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
    border: 1px solid #3C3C3C !important;
}

.flatpickr-calendar {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
    border: 1px solid #3C3C3C !important;
}

.flatpickr-weekday {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
}

.flatpickr-month {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
}

.flatpickr-prev-month {
    fill: #D1D1D1 !important;
}

.flatpickr-next-month {
    fill: #D1D1D1 !important;
}

.flatpickr-day {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
}

.flatpickr-hour {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
}

.flatpickr-minute {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
}

.flatpickr-time-separator {
    color: #D1D1D1 !important;
    background-color: #181818 !important;
}

.table-striped>tbody>tr:nth-of-type(2n+ 1)>* {
    color: #E2E2E2;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #212529 !important;
    color: #9C9C9C !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #2C2C2C;
    color: #E2E2E2;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_processing,
.table-hover>tbody>tr:hover>*,
div,
label {
    color: #E2E2E2;
}

.table.dataTable tbody tr {
    background-color: #212529 !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #3C3C3C;
}

.select2-selection {
    color: #D1D1D1 !important;
    background-color: #0D1117 !important;
    border-color: #3c3c3c !important;
}

.select2-selection__rendered {
    border-color: #3C3C3C !important;
    color: #D1D1D1 !important;
}

.select2-selection__choice__display {
    color: #D1D1D1 !important;
}

.select2-dropdown,
.select2-selection--single,
.select2-search__field {
    border-color: #3C3C3C !important;
    color: #D1D1D1 !important;
    background-color: #0d1117 !important;
}

/* Datatables.net pagination button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #FF7500 !important;
    background: none;
    color: #FFFFFF !important;
    border: 1px solid #262626;
}

.dt-search {
    display: inline !important;
    color: #FFFFFF;
}

/* leaflet popup pane layout */
.infowin {
    color: #181818 !important;
}

table.dataTable thead th.sorting::after {
    color: #DDDDDD;
}

.standard-color {
    color: #E2E2E2 !important;
}

#n-sidebar.bg-dark ul>li.nav-item div.collapse,
#n-sidebar.bg-dark ul>li.nav-item div.collapsing {
    background-color: #212529 !important;
}

.dygraph-axis-label {
    color: #e2e2e2;
}

.dygraph-legend {
    background: #e2e2e2;
}

.form-check-label {
    color: #e2e2e2;
}

.dropdown-menu {
    background-color: #212529 !important;
    color: #ffffff !important;

    .dropdown-item {
        background-color: transparent !important;
        color: #ffffff !important;

        &:hover {
            background-color: #343a40 !important;
            color: #ffffff !important;
        }
    }
}


.btn-info {
    background-color: #0dcaf0 !important;
}

.link-button {
    color: rgb(255, 255, 255) !important;
}

.link-disabled {
    color: rgb(173, 181, 189) !important;
}


.select2-results__option {
    color: rgb(209, 209, 209) !important;
}


// Table

.ntopng-table {
    background-color: #232323 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.ntopng-table thead th {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-bottom: 1px solid #444 !important;
}

.ntopng-table th:not(:last-child)::after {
    background: #333 !important;
}

.ntopng-table th:not(:last-child):hover::after {
    background: #555 !important;
}

.ntopng-table th.resizing::after {
    background: var(--ntop-orange) !important;
}

.ntopng-table tbody tr {
    background-color: transparent !important;
}

.ntopng-table tbody tr td {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #333 !important;
}

.ntopng-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.wrap-column {
    color: #e0e0e0 !important;
}

.btn-link {
    color: #e0e0e0 !important;
}

.btn-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--ntop-orange) !important;
}

input[type="search"] {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

input[type="search"]:focus {
    background-color: #1f1f1f !important;
    border-color: var(--ntop-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 143, 0, 0.25) !important;
}

label {
    color: #d0d0d0 !important;
}

select {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

select:focus {
    border-color: var(--ntop-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 143, 0, 0.25) !important;
}

.page-link {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

.page-link:hover {
    background-color: #3a3a3a !important;
    color: var(--ntop-orange) !important;
}

.page-item.active .page-link {
    background-color: var(--ntop-orange) !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    background-color: #333 !important;
    color: #666 !important;
}

.centered-message {
    color: #aaa !important;
}

.query {
    color: #999 !important;
}

.badge.bg-secondary {
    background-color: #333 !important;
    color: #ccc !important;
}

.badge.bg-secondary:hover {
    background-color: #444 !important;
}

.detail-value {
    color: #e2e2e2;
    font-weight: normal;
}

.text-muted {
    color: #6c757d !important;
    --bs-text-opacity: 1;
}

.apexcharts-tooltip {
    background-color: #212529 !important;
}

.apexcharts-tooltip-title {
    background-color: #2C2C2C !important;
}

.dropdown-menu .dropdown-item.active {
    background-color: var(--ntop-orange) !important;
    color: #e2e2e2 !important;    
}