/* Dark mode overrides for elements that are specific to SONNAR and not covered by the template's themes/dark-layout.css. The theme is toggled by adding the `dark-layout` class to (see panels/navbar.blade.php). */ body { color-scheme: light; } body.dark-layout { color-scheme: dark; } /* Highcharts 13 resolves its colors with CSS light-dark() and injects `.highcharts-container { color-scheme: light dark }`, which follows the OS preference. Pin it to the app theme instead (body prefix beats its specificity). */ body .highcharts-container { color-scheme: light; } body.dark-layout .highcharts-container { color-scheme: dark; } /* Custom top navbar (nav.navbar.fixed-top) */ body.dark-layout nav.navbar.fixed-top.navbar-light { background-color: #283046; box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35); } body.dark-layout nav.navbar.fixed-top .btn:not(.btn-primary) { color: #d0d2d6; } body.dark-layout nav.navbar.fixed-top .dropdown-menu { background-color: #283046; border-color: #3b4253; } body.dark-layout nav.navbar.fixed-top .dropdown-item, body.dark-layout nav.navbar.fixed-top .dropdown-item-text { color: #d0d2d6; } body.dark-layout nav.navbar.fixed-top .dropdown-item:hover, body.dark-layout nav.navbar.fixed-top .dropdown-item:focus { background-color: #161d31; color: #7367f0; } /* Generic light-only utilities used across views */ body.dark-layout .bg-white, body.dark-layout .bg-light { background-color: #283046 !important; color: #d0d2d6; } body.dark-layout .text-dark { color: #d0d2d6 !important; } body.dark-layout .border, body.dark-layout .border-top, body.dark-layout .border-bottom, body.dark-layout .border-left, body.dark-layout .border-right { border-color: #3b4253 !important; } /* Buttons: btn-secondary stays light gray in dark mode (colors.css forces it with !important, so these overrides need !important too) */ body.dark-layout .btn-secondary { background-color: #4b5268 !important; border-color: #5e6788 !important; color: #fff; } body.dark-layout .btn-secondary:hover, body.dark-layout .btn-secondary:not(:disabled):not(.disabled):active, body.dark-layout .btn-secondary:not(:disabled):not(.disabled).active, body.dark-layout .show > .btn-secondary.dropdown-toggle { background-color: #5e6788 !important; border-color: #6e77a0 !important; color: #fff; box-shadow: none; } body.dark-layout .btn-secondary:focus, body.dark-layout .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(94, 103, 136, 0.5); } body.dark-layout .btn-secondary.disabled, body.dark-layout .btn-secondary:disabled { background-color: #343d55 !important; border-color: #404656 !important; color: #8a91a5; } /* Tables */ body.dark-layout .table, body.dark-layout .table th, body.dark-layout .table td { color: #d0d2d6; border-color: #3b4253; } body.dark-layout .table thead th { background-color: #343d55; color: #d0d2d6; } body.dark-layout .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } body.dark-layout .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); color: #d0d2d6; } body.dark-layout .table-light, body.dark-layout .table-light > th, body.dark-layout .table-light > td, body.dark-layout .thead-light th { background-color: #343d55; color: #d0d2d6; } /* Forms */ body.dark-layout .form-control, body.dark-layout .custom-select, body.dark-layout select, body.dark-layout textarea { background-color: #283046; border-color: #404656; color: #d0d2d6; } body.dark-layout .form-control:focus, body.dark-layout .custom-select:focus { background-color: #283046; color: #d0d2d6; } body.dark-layout .form-control::placeholder { color: #676d7d; } body.dark-layout .form-control:disabled, body.dark-layout .form-control[readonly] { background-color: #1e2538; } body.dark-layout .input-group-text { background-color: #343d55; border-color: #404656; color: #d0d2d6; } body.dark-layout .custom-control-label::before { background-color: #283046; border-color: #404656; } body.dark-layout label, body.dark-layout legend { color: #d0d2d6; } /* Modals, lists, pagination, misc */ body.dark-layout .modal-content { background-color: #283046; color: #d0d2d6; } body.dark-layout .modal-header, body.dark-layout .modal-footer { border-color: #3b4253; } body.dark-layout .modal-header .close { color: #d0d2d6; text-shadow: none; } body.dark-layout .list-group-item { background-color: #283046; border-color: #3b4253; color: #d0d2d6; } body.dark-layout .page-link { background-color: #283046; border-color: #3b4253; color: #d0d2d6; } body.dark-layout .nav-tabs .nav-link { color: #d0d2d6; } body.dark-layout .nav-tabs .nav-link.active { background-color: #283046; border-color: #3b4253 #3b4253 #283046; color: #7367f0; } body.dark-layout hr { border-color: #3b4253; } body.dark-layout .alert-light { background-color: #343d55; color: #d0d2d6; } body.dark-layout pre, body.dark-layout code { background-color: #161d31; color: #d0d2d6; } /* Third-party widgets loaded from CDN */ body.dark-layout .swal2-popup { background-color: #283046; color: #d0d2d6; } body.dark-layout .swal2-title, body.dark-layout .swal2-html-container, body.dark-layout .swal2-content { color: #d0d2d6; } body.dark-layout .highcharts-background { fill: #283046; } body.dark-layout .highcharts-title, body.dark-layout .highcharts-subtitle, body.dark-layout .highcharts-axis-labels text, body.dark-layout .highcharts-axis-title, body.dark-layout .highcharts-legend-item text, body.dark-layout .highcharts-data-label text { fill: #d0d2d6 !important; color: #d0d2d6 !important; } body.dark-layout .highcharts-grid-line { stroke: #3b4253; } /* Data labels ship with a white text outline (halo) that hides light text on dark charts */ body.dark-layout .highcharts-data-label text .highcharts-text-outline, body.dark-layout .highcharts-label text .highcharts-text-outline { stroke: #283046 !important; } body.dark-layout .ui-widget-content, body.dark-layout .ui-widget-header { background: #283046; border-color: #3b4253; color: #d0d2d6; } /* Sidebar: remove the white glow the template puts on the active item in the dark menu */ body.dark-layout .main-menu.menu-dark .navigation > li.active > a { box-shadow: none; background: linear-gradient(118deg, #05642f, rgb(2, 145, 65)); } body.dark-layout .main-menu.menu-dark .navigation > li ul .active { box-shadow: none; background: linear-gradient(118deg, #05642f, rgb(6, 122, 11)); }