/* ============================================================================= * MeterNet dark theme overrides. * * Activated by data-bs-theme="dark" on (managed by theme.js). * Brand colors sampled from Dashboard/Administration/images/MeterSense.png: * Navy (Meter) #003060 / #002060 * Teal (Sense) #00a896 * Blue #0050c0 · Cyan #2b9fd4 · Green #40b050 * ========================================================================== */ html[data-bs-theme="dark"] { --ms-navy: #8eb8d9; --ms-navy-dark: #a8cce6; --ms-teal: #00c9b0; --ms-teal-hover: #2dd9c4; --ms-teal-active: #00a896; --ms-blue: #4d9fe8; --ms-mid-blue: #5aafe8; --ms-cyan: #2b9fd4; --ms-green: #5ed472; --ms-border: #1a4d7a; --ms-surface: #000c18; --ms-card: #002447; --ms-card-raised: #003060; --ms-text: #e8f2fa; --ms-text-muted: #8eb0cc; --ms-zebra-odd: #002447; --ms-zebra-even: #001a33; --bs-body-bg: var(--ms-surface); --bs-body-color: var(--ms-text); --bs-border-color: var(--ms-border); --bs-secondary-bg: var(--ms-card-raised); --bs-tertiary-bg: var(--ms-zebra-even); --bs-primary-rgb: 0, 201, 176; --bs-link-color: var(--ms-teal); --bs-link-hover-color: var(--ms-teal-hover); } html[data-bs-theme="dark"] body { background-color: var(--ms-surface); color: var(--ms-text); } /* --------------------------------------------------------------------------- * Non theme-aware Bootstrap utilities * ------------------------------------------------------------------------- */ html[data-bs-theme="dark"] .bg-white { background-color: var(--ms-card) !important; } html[data-bs-theme="dark"] .bg-light { background-color: var(--ms-zebra-even) !important; } html[data-bs-theme="dark"] .bg-body, html[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--ms-surface) !important; } html[data-bs-theme="dark"] .text-dark, html[data-bs-theme="dark"] .text-black, html[data-bs-theme="dark"] .text-body { color: var(--ms-text) !important; } html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: var(--ms-text-muted) !important; } html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end { border-color: var(--ms-border) !important; } html[data-bs-theme="dark"] .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important; } html[data-bs-theme="dark"] .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.55) !important; } /* --------------------------------------------------------------------------- * Common components * ------------------------------------------------------------------------- */ html[data-bs-theme="dark"] .card { background-color: var(--ms-card); border-color: var(--ms-border); } html[data-bs-theme="dark"] .card .card-header, html[data-bs-theme="dark"] .card .card-footer { background-color: var(--ms-card-raised); border-color: var(--ms-border); } html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .toast { background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .list-group-item { background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .list-group-item-action:hover, html[data-bs-theme="dark"] .list-group-item-action:focus { background-color: var(--ms-card-raised); color: var(--ms-text); } html[data-bs-theme="dark"] .accordion-item, html[data-bs-theme="dark"] .accordion-button { background-color: var(--ms-card); color: var(--ms-text); border-color: var(--ms-border); } html[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(0, 168, 150, 0.14); color: var(--ms-text); } html[data-bs-theme="dark"] .accordion-button::after { filter: invert(0.85); } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .input-group-text { background-color: var(--ms-zebra-even); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .form-control::placeholder { color: var(--ms-text-muted); } html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-select:disabled { background-color: var(--ms-surface); color: var(--ms-text-muted); } html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ms-text); --bs-table-border-color: var(--ms-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--ms-text); --bs-table-hover-bg: rgba(0, 168, 150, 0.08); --bs-table-hover-color: var(--ms-text); color: var(--ms-text); border-color: var(--ms-border); } html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table thead.table-light, html[data-bs-theme="dark"] .table .table-light > th, html[data-bs-theme="dark"] .table > thead.table-light > tr > th { --bs-table-bg: var(--ms-card-raised); --bs-table-color: var(--ms-text); background-color: var(--ms-card-raised); color: var(--ms-text); border-color: var(--ms-border); } html[data-bs-theme="dark"] .btn-outline-secondary { color: var(--ms-text); border-color: var(--ms-border); } html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.08); border-color: var(--ms-text-muted); color: var(--ms-text); } html[data-bs-theme="dark"] .btn-outline-dark { color: var(--ms-text); border-color: var(--ms-text-muted); } html[data-bs-theme="dark"] .btn-outline-dark:hover { background-color: var(--ms-text); color: var(--ms-surface); } html[data-bs-theme="dark"] .btn-light { background-color: var(--ms-card-raised); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .btn-light:hover { background-color: #004878; border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } html[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--ms-text-muted); } html[data-bs-theme="dark"] .page-link { background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .nav-tabs { border-color: var(--ms-border); } html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--ms-card); border-color: var(--ms-border) var(--ms-border) var(--ms-card); color: var(--ms-text); } html[data-bs-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--ms-border); color: var(--ms-teal); } html[data-bs-theme="dark"] .navbar.bg-white, html[data-bs-theme="dark"] .navbar-light { background-color: var(--ms-card) !important; border-color: var(--ms-border); } html[data-bs-theme="dark"] .navbar .nav-link { color: var(--ms-navy); } html[data-bs-theme="dark"] .navbar .nav-link:hover, html[data-bs-theme="dark"] .navbar .nav-link:focus { color: var(--ms-teal); } html[data-bs-theme="dark"] .navbar .navbar-toggler-icon { filter: invert(0.85); } html[data-bs-theme="dark"] .offcanvas-header { border-bottom-color: var(--ms-border); } html[data-bs-theme="dark"] .offcanvas-body { background-color: var(--ms-card); color: var(--ms-text); } html[data-bs-theme="dark"] .dropdown-item { color: var(--ms-text); } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--ms-card-raised); color: var(--ms-text); } html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--ms-border); } html[data-bs-theme="dark"] .alert { border-color: var(--ms-border); } html[data-bs-theme="dark"] .progress { background-color: var(--ms-zebra-even); } html[data-bs-theme="dark"] .badge.bg-light { background-color: var(--ms-card-raised) !important; color: var(--ms-text) !important; } /* DataTables */ html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select, html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: var(--ms-zebra-even); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] table.dataTable { border-color: var(--ms-border); } html[data-bs-theme="dark"] table.dataTable thead th, html[data-bs-theme="dark"] table.dataTable thead td { border-color: var(--ms-border) !important; } html[data-bs-theme="dark"] table.dataTable tbody tr { background-color: var(--ms-card); color: var(--ms-text); } html[data-bs-theme="dark"] table.dataTable tbody tr:nth-child(even) { background-color: var(--ms-zebra-even); } html[data-bs-theme="dark"] table.dataTable tbody tr:hover { background-color: rgba(0, 168, 150, 0.08) !important; } /* Leaflet */ html[data-bs-theme="dark"] .leaflet-container { background: var(--ms-surface); } html[data-bs-theme="dark"] .leaflet-popup-content-wrapper, html[data-bs-theme="dark"] .leaflet-popup-tip { background: var(--ms-card); color: var(--ms-text); } html[data-bs-theme="dark"] .leaflet-bar a { background-color: var(--ms-card); border-color: var(--ms-border); color: var(--ms-text); } html[data-bs-theme="dark"] .leaflet-bar a:hover { background-color: var(--ms-card-raised); }