/* * Dark Mode Theme for Trackermize - SB Admin 2 * Based on https://github.com/shahryarahmad/startbootstrap-sb-admin-2-dark-light-mode * * IMPORTANT: This CSS only applies when [data-theme="dark"] is set on the element. * Without dark mode enabled, users see the normal light theme from sb-admin-2.css */ /* ==================== DARK MODE VARIABLES ==================== */ [data-theme="dark"] { --dark-bg: #1a1d23; --dark-bg-secondary: #23272e; --dark-bg-tertiary: #2d3138; --dark-text: #e4e6eb; --dark-text-secondary: #b0b3b8; --dark-border: #3e4147; --dark-hover: #3a3f47; } /* ==================== GLOBAL ==================== */ [data-theme="dark"] body { background-color: var(--dark-bg); color: var(--dark-text); } [data-theme="dark"] #wrapper { background-color: var(--dark-bg); } [data-theme="dark"] #content-wrapper { background-color: var(--dark-bg); } [data-theme="dark"] #content { background-color: var(--dark-bg); } [data-theme="dark"] hr { border-top-color: var(--dark-border); } /* ==================== TOPBAR ==================== */ [data-theme="dark"] .topbar { background-color: var(--dark-bg-secondary) !important; } [data-theme="dark"] .topbar .nav-link { color: var(--dark-text-secondary); } [data-theme="dark"] .topbar .nav-link:hover { color: var(--dark-text); } [data-theme="dark"] .topbar.navbar-light { background-color: var(--dark-bg-secondary) !important; border-bottom: 1px solid var(--dark-border); } [data-theme="dark"] .topbar .navbar-search input { background-color: var(--dark-bg-tertiary); border-color: var(--dark-border); color: var(--dark-text); } /* ==================== SIDEBAR ==================== */ [data-theme="dark"] .sidebar { background: var(--dark-bg-secondary) !important; } [data-theme="dark"] .sidebar .nav-item .nav-link { color: #b0b3b8; } [data-theme="dark"] .sidebar .nav-item .nav-link:hover { background-color: var(--dark-hover); color: var(--dark-text); } [data-theme="dark"] .sidebar .nav-item .nav-link.active { background-color: var(--dark-bg-tertiary); color: #fff; } [data-theme="dark"] .sidebar-divider { border-top-color: var(--dark-border) !important; } [data-theme="dark"] .sidebar .sidebar-heading { color: #6c757d; } [data-theme="dark"] .sidebar .sidebar-brand { color: var(--dark-text); } [data-theme="dark"] .sidebar-dark .sidebar-brand { color: var(--dark-text); } [data-theme="dark"] .sidebar .sidebar-brand:hover { color: #fff; } /* Collapse menu */ [data-theme="dark"] .sidebar .collapse-inner { background-color: var(--dark-bg-tertiary); } [data-theme="dark"] .sidebar .collapse-item { color: var(--dark-text-secondary); } [data-theme="dark"] .sidebar .collapse-item:hover { background-color: var(--dark-hover); color: var(--dark-text); } /* ==================== CARDS ==================== */ [data-theme="dark"] .card { background-color: var(--dark-bg-secondary); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .card-header { background-color: var(--dark-bg-tertiary); border-bottom-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .card-footer { background-color: var(--dark-bg-tertiary); border-top-color: var(--dark-border); } [data-theme="dark"] .card-body { color: var(--dark-text); } /* Keep colored left borders visible */ [data-theme="dark"] .border-left-primary { border-left-color: #4e73df !important; } [data-theme="dark"] .border-left-success { border-left-color: #1cc88a !important; } [data-theme="dark"] .border-left-info { border-left-color: #36b9cc !important; } [data-theme="dark"] .border-left-warning { border-left-color: #f6c23e !important; } [data-theme="dark"] .border-left-danger { border-left-color: #e74a3b !important; } /* ==================== FORMS ==================== */ [data-theme="dark"] .form-control { background-color: var(--dark-bg-tertiary); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .form-control:focus { background-color: var(--dark-bg-tertiary); border-color: #4e73df; color: var(--dark-text); } [data-theme="dark"] .form-control::placeholder { color: #6c757d; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--dark-bg); color: #6c757d; } [data-theme="dark"] select.form-control, [data-theme="dark"] textarea.form-control { background-color: var(--dark-bg-tertiary); color: var(--dark-text); } [data-theme="dark"] .custom-select { background-color: var(--dark-bg-tertiary); border-color: var(--dark-border); color: var(--dark-text); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23e4e6eb' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); } [data-theme="dark"] .input-group-text { background-color: var(--dark-bg-tertiary); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] label { color: var(--dark-text); } [data-theme="dark"] .form-check-label { color: var(--dark-text); } /* ==================== TABLES ==================== */ [data-theme="dark"] .table { color: var(--dark-text); background-color: var(--dark-bg-secondary); } [data-theme="dark"] .table thead th { background-color: var(--dark-bg-tertiary); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--dark-border); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--dark-hover); color: var(--dark-text); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--dark-bg); } [data-theme="dark"] .table-bordered { border-color: var(--dark-border); } /* ==================== BUTTONS ==================== */ /* Primary buttons - keep good contrast */ [data-theme="dark"] .btn-primary { background-color: #4e73df; border-color: #4e73df; color: #fff; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn-primary:active { background-color: #3a5dc7; border-color: #3a5dc7; color: #fff; } /* Secondary buttons */ [data-theme="dark"] .btn-secondary { background-color: #5a6169; border-color: #5a6169; color: #fff; } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-secondary:focus, [data-theme="dark"] .btn-secondary:active { background-color: #4a5058; border-color: #4a5058; color: #fff; } /* Success buttons */ [data-theme="dark"] .btn-success { background-color: #1cc88a; border-color: #1cc88a; color: #fff; } [data-theme="dark"] .btn-success:hover, [data-theme="dark"] .btn-success:focus, [data-theme="dark"] .btn-success:active { background-color: #17a673; border-color: #17a673; color: #fff; } /* Danger buttons */ [data-theme="dark"] .btn-danger { background-color: #e74a3b; border-color: #e74a3b; color: #fff; } [data-theme="dark"] .btn-danger:hover, [data-theme="dark"] .btn-danger:focus, [data-theme="dark"] .btn-danger:active { background-color: #d32f2f; border-color: #d32f2f; color: #fff; } /* Warning buttons */ [data-theme="dark"] .btn-warning { background-color: #f6c23e; border-color: #f6c23e; color: #1a1d23; } [data-theme="dark"] .btn-warning:hover, [data-theme="dark"] .btn-warning:focus, [data-theme="dark"] .btn-warning:active { background-color: #f4b619; border-color: #f4b619; color: #1a1d23; } /* Info buttons */ [data-theme="dark"] .btn-info { background-color: #36b9cc; border-color: #36b9cc; color: #fff; } [data-theme="dark"] .btn-info:hover, [data-theme="dark"] .btn-info:focus, [data-theme="dark"] .btn-info:active { background-color: #2a96a5; border-color: #2a96a5; color: #fff; } /* Light buttons - improved contrast */ [data-theme="dark"] .btn-light { background-color: #4a4f57; border-color: #4a4f57; color: #fff; } [data-theme="dark"] .btn-light:hover, [data-theme="dark"] .btn-light:focus, [data-theme="dark"] .btn-light:active { background-color: #5a6169; border-color: #5a6169; color: #fff; } /* Dark buttons */ [data-theme="dark"] .btn-dark { background-color: #2d3138; border-color: #3e4147; color: var(--dark-text); } [data-theme="dark"] .btn-dark:hover, [data-theme="dark"] .btn-dark:focus, [data-theme="dark"] .btn-dark:active { background-color: #3a3f47; border-color: #4a4f57; color: #fff; } /* Outline buttons */ [data-theme="dark"] .btn-outline-primary { color: #6ea8fe; border-color: #6ea8fe; background-color: transparent; } [data-theme="dark"] .btn-outline-primary:hover, [data-theme="dark"] .btn-outline-primary:focus, [data-theme="dark"] .btn-outline-primary:active { background-color: #4e73df; border-color: #4e73df; color: #fff; } [data-theme="dark"] .btn-outline-secondary { color: #b0b3b8; border-color: #5a6169; background-color: transparent; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-secondary:focus, [data-theme="dark"] .btn-outline-secondary:active { background-color: #5a6169; border-color: #5a6169; color: #fff; } [data-theme="dark"] .btn-outline-success { color: #1cc88a; border-color: #1cc88a; background-color: transparent; } [data-theme="dark"] .btn-outline-success:hover, [data-theme="dark"] .btn-outline-success:focus, [data-theme="dark"] .btn-outline-success:active { background-color: #1cc88a; border-color: #1cc88a; color: #fff; } [data-theme="dark"] .btn-outline-danger { color: #e74a3b; border-color: #e74a3b; background-color: transparent; } [data-theme="dark"] .btn-outline-danger:hover, [data-theme="dark"] .btn-outline-danger:focus, [data-theme="dark"] .btn-outline-danger:active { background-color: #e74a3b; border-color: #e74a3b; color: #fff; } [data-theme="dark"] .btn-outline-warning { color: #f6c23e; border-color: #f6c23e; background-color: transparent; } [data-theme="dark"] .btn-outline-warning:hover, [data-theme="dark"] .btn-outline-warning:focus, [data-theme="dark"] .btn-outline-warning:active { background-color: #f6c23e; border-color: #f6c23e; color: #1a1d23; } [data-theme="dark"] .btn-outline-info { color: #36b9cc; border-color: #36b9cc; background-color: transparent; } [data-theme="dark"] .btn-outline-info:hover, [data-theme="dark"] .btn-outline-info:focus, [data-theme="dark"] .btn-outline-info:active { background-color: #36b9cc; border-color: #36b9cc; color: #fff; } /* ==================== DROPDOWNS ==================== */ [data-theme="dark"] .dropdown-menu { background-color: var(--dark-bg-secondary); border-color: var(--dark-border); } [data-theme="dark"] .dropdown-item { color: var(--dark-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dark-hover); color: var(--dark-text); } [data-theme="dark"] .dropdown-divider { border-top-color: var(--dark-border); } [data-theme="dark"] .dropdown-header { color: var(--dark-text-secondary); } /* ==================== MODALS ==================== */ [data-theme="dark"] .modal-content { background-color: var(--dark-bg-secondary); border-color: var(--dark-border); } [data-theme="dark"] .modal-header { border-bottom-color: var(--dark-border); background-color: var(--dark-bg-tertiary); } [data-theme="dark"] .modal-footer { border-top-color: var(--dark-border); background-color: var(--dark-bg-tertiary); } [data-theme="dark"] .modal-title { color: var(--dark-text); } [data-theme="dark"] .modal-body { color: var(--dark-text); } [data-theme="dark"] .close { color: var(--dark-text); opacity: 0.8; text-shadow: none; } [data-theme="dark"] .close:hover { color: var(--dark-text); opacity: 1; } /* ==================== ALERTS ==================== */ [data-theme="dark"] .alert-success { background-color: rgba(28, 200, 138, 0.2); border-color: #1cc88a; color: #fff; } [data-theme="dark"] .alert-info { background-color: rgba(54, 185, 204, 0.2); border-color: #36b9cc; color: #fff; } [data-theme="dark"] .alert-warning { background-color: rgba(246, 194, 62, 0.2); border-color: #f6c23e; color: #fff; } [data-theme="dark"] .alert-danger { background-color: rgba(231, 74, 59, 0.2); border-color: #e74a3b; color: #fff; } /* ==================== BADGES ==================== */ [data-theme="dark"] .badge-light { background-color: var(--dark-bg-tertiary); color: var(--dark-text); } [data-theme="dark"] .badge-secondary { background-color: #6c757d; color: #fff; } /* ==================== PROGRESS BARS ==================== */ [data-theme="dark"] .progress { background-color: var(--dark-bg-tertiary); } /* ==================== PAGINATION ==================== */ [data-theme="dark"] .page-link { background-color: var(--dark-bg-secondary); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .page-link:hover { background-color: var(--dark-hover); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .page-item.active .page-link { background-color: #4e73df; border-color: #4e73df; } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dark-bg); color: #6c757d; } /* ==================== TEXT COLORS ==================== */ [data-theme="dark"] .text-gray-100 { color: var(--dark-text) !important; } [data-theme="dark"] .text-gray-200 { color: var(--dark-text) !important; } [data-theme="dark"] .text-gray-300 { color: var(--dark-text) !important; } [data-theme="dark"] .text-gray-400 { color: var(--dark-text-secondary) !important; } [data-theme="dark"] .text-gray-500 { color: var(--dark-text-secondary) !important; } [data-theme="dark"] .text-gray-600 { color: var(--dark-text-secondary) !important; } [data-theme="dark"] .text-gray-700 { color: var(--dark-text) !important; } [data-theme="dark"] .text-gray-800 { color: var(--dark-text) !important; } [data-theme="dark"] .text-gray-900 { color: var(--dark-text) !important; } /* Keep color utilities visible */ [data-theme="dark"] .text-primary { color: #4e73df !important; } [data-theme="dark"] .text-success { color: #1cc88a !important; } [data-theme="dark"] .text-info { color: #36b9cc !important; } [data-theme="dark"] .text-warning { color: #f6c23e !important; } [data-theme="dark"] .text-danger { color: #e74a3b !important; } [data-theme="dark"] .text-white { color: #fff !important; } [data-theme="dark"] .text-muted { color: #6c757d !important; } /* ==================== BACKGROUNDS ==================== */ [data-theme="dark"] .bg-white { background-color: var(--dark-bg-secondary) !important; } [data-theme="dark"] .bg-light { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--dark-bg) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--dark-bg-secondary) !important; } /* Remove gradient backgrounds in dark mode */ [data-theme="dark"] .bg-gradient-primary { background: var(--dark-bg-secondary) !important; background-image: none !important; } /* ==================== BORDERS ==================== */ [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left, [data-theme="dark"] .border-right { border-color: var(--dark-border) !important; } /* ==================== SHADOWS ==================== */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important; } /* ==================== BREADCRUMBS ==================== */ [data-theme="dark"] .breadcrumb { background-color: var(--dark-bg-secondary); } [data-theme="dark"] .breadcrumb-item a { color: #4e73df; } [data-theme="dark"] .breadcrumb-item.active { color: var(--dark-text-secondary); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--dark-text-secondary); } /* ==================== LIST GROUPS ==================== */ [data-theme="dark"] .list-group-item { background-color: var(--dark-bg-secondary); border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .list-group-item:hover { background-color: var(--dark-hover); } [data-theme="dark"] .list-group-item.active { background-color: #4e73df; border-color: #4e73df; } /* ==================== NAV TABS ==================== */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--dark-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--dark-text-secondary); } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--dark-border); color: var(--dark-text); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dark-bg-secondary); border-color: var(--dark-border) var(--dark-border) var(--dark-bg-secondary); color: var(--dark-text); } /* ==================== ACCORDION ==================== */ [data-theme="dark"] .accordion .card { background-color: var(--dark-bg-secondary); } [data-theme="dark"] .accordion .card-header { background-color: var(--dark-bg-tertiary); } [data-theme="dark"] .accordion .btn-link { color: var(--dark-text); } /* ==================== SCROLL TO TOP BUTTON ==================== */ [data-theme="dark"] .scroll-to-top { background-color: var(--dark-bg-tertiary); color: var(--dark-text); } [data-theme="dark"] .scroll-to-top:hover { background-color: var(--dark-hover); } /* ==================== FOOTER ==================== */ [data-theme="dark"] footer.sticky-footer { background-color: var(--dark-bg-secondary); } [data-theme="dark"] footer.sticky-footer .copyright { color: var(--dark-text-secondary); } /* ==================== HIGHCHARTS ==================== */ /* Chart background */ [data-theme="dark"] .highcharts-background { fill: var(--dark-bg-secondary) !important; } /* Chart titles and axis labels */ [data-theme="dark"] .highcharts-title { fill: var(--dark-text) !important; } [data-theme="dark"] .highcharts-subtitle { fill: var(--dark-text-secondary) !important; } [data-theme="dark"] .highcharts-axis-title { fill: var(--dark-text) !important; } [data-theme="dark"] .highcharts-axis-labels text { fill: var(--dark-text) !important; } /* Grid lines and axes */ [data-theme="dark"] .highcharts-grid-line { stroke: var(--dark-border) !important; } [data-theme="dark"] .highcharts-axis-line { stroke: var(--dark-border) !important; } [data-theme="dark"] .highcharts-tick { stroke: var(--dark-border) !important; } /* Pie chart data labels - white text, normal weight, same font as light mode */ [data-theme="dark"] .highcharts-data-label text { fill: #fff !important; stroke: none !important; font-weight: normal !important; } [data-theme="dark"] .highcharts-data-label-connector { stroke: var(--dark-text) !important; } /* Legend */ [data-theme="dark"] .highcharts-legend-item text { fill: var(--dark-text) !important; } [data-theme="dark"] .highcharts-legend-box { fill: transparent !important; } /* Tooltips */ [data-theme="dark"] .highcharts-tooltip-box { fill: var(--dark-bg-tertiary) !important; stroke: var(--dark-border) !important; } [data-theme="dark"] .highcharts-tooltip text { fill: var(--dark-text) !important; } [data-theme="dark"] .highcharts-label-box { fill: var(--dark-bg-tertiary) !important; stroke: var(--dark-border) !important; } /* Generic text fallback */ [data-theme="dark"] .highcharts-label text { fill: var(--dark-text) !important; } /* ==================== CUSTOM SCROLLBAR ==================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dark-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dark-bg-tertiary); border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dark-hover); } /* ==================== CRISPY FORMS ==================== */ [data-theme="dark"] .crispy-form label { color: var(--dark-text); } [data-theme="dark"] .crispy-form .form-text { color: var(--dark-text-secondary); } [data-theme="dark"] .invalid-feedback { color: #e74a3b; } [data-theme="dark"] .valid-feedback { color: #1cc88a; } [data-theme="dark"] .form-control.is-invalid { border-color: #e74a3b; } [data-theme="dark"] .form-control.is-valid { border-color: #1cc88a; } /* ==================== UTILITIES ==================== */ [data-theme="dark"] a { color: #4e73df; } [data-theme="dark"] a:hover { color: #224abe; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--dark-text); } [data-theme="dark"] p { color: var(--dark-text); } [data-theme="dark"] small, [data-theme="dark"] .small { color: var(--dark-text-secondary); } /* ==================== TRANSITIONS ==================== */ body, .card, .btn, .form-control, .sidebar, .topbar, .table, .dropdown-menu, .modal-content { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }